fix(fluent-editor): fix toolbar icon and undo/redo (#1786)

2024-07-27 14:05:28 +08:00 · 2024-07-27 14:05:28 +08:00 · 88d07d16ef
parent 0d003d8e7a
commit 88d07d16ef
9 changed files with 112 additions and 6 deletions
--- a/examples/sites/demos/pc/app/fluent-editor/fluent-editor-composition-api.vue
+++ b/examples/sites/demos/pc/app/fluent-editor/fluent-editor-composition-api.vue
@ -0,0 +1,35 @@
+<template>
+  <div id="editor">
+    <p>Hello <strong>FluentEditor</strong>!</p> 
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean'],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ header: [] }],
+  [{ font: [] }, { size: [] }],
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }, { list: 'bullet' }, { list: 'ordered' }, { list: 'check' }],
+  ['code', 'code-block', 'blockquote'],
+  ['image', 'file', 'better-table', 'link', 'global-link'],
+  ['fullscreen', 'emoji', 'help', 'screenshot'],
+]
+
+onMounted(() => {
+  editor = new FluentEditor('#editor', {
+    theme: 'snow',
+    modules: {
+      toolbar: {
+        container: TOOLBAR_CONFIG
+      }
+    }
+  })
+})
+</script>
--- a/examples/sites/demos/pc/app/fluent-editor/fluent-editor.vue
+++ b/examples/sites/demos/pc/app/fluent-editor/fluent-editor.vue
@ -0,0 +1,40 @@
+<template>
+  <div id="editor">
+    <p>Hello <strong>FluentEditor</strong>!</p> 
+  </div>
+</template>
+
+<script>
+import FluentEditor from '@opentiny/fluent-editor'
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean'],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ header: [] }],
+  [{ font: [] }, { size: [] }],
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }, { list: 'bullet' }, { list: 'ordered' }, { list: 'check' }],
+  ['code', 'code-block', 'blockquote'],
+  ['image', 'file', 'better-table', 'link', 'global-link'],
+  ['fullscreen', 'emoji', 'help', 'screenshot'],
+]
+
+export default {
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
+      editor: null,
+    }
+  },
+  mounted() {
+    this.editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        }
+      }
+    })
+  }
+}
+</script>
--- a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js
+++ b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js
@ -42,6 +42,19 @@ export default {
          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
      },
      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'fluent-editor',
+      name: {
+        'zh-CN': '框架无关版本',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>new FluentEditor(\'#editor\', options)</code> 初始化一个富文本编辑器，用法和 Quill 一样，第一个参数是需要挂载富文本编辑器的 DOM 节点，第二个参数是配置项。</p>',
+        'en-US':
+          '<p></p>'
+      },
+      codeFiles: ['fluent-editor.vue']
    }
  ]
 }
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@ -21,6 +21,7 @@
    "pub": "pnpm publish --no-git-checks --access=public"
  },
  "dependencies": {
+    "@opentiny/fluent-editor": "workspace:^",
    "@opentiny/vue": "workspace:~",
    "@opentiny/vue-common": "workspace:~",
    "@opentiny/vue-design-aurora": "workspace:~",
--- a/packages/fluent-editor/src/assets/font.scss
+++ b/packages/fluent-editor/src/assets/font.scss
@ -2,7 +2,7 @@
@import './common';
 .ql-formats {
  .ql-font.ql-picker {
-    width: 85px;
+    width: 108px;
    span[data-value='arial']::before {
      content: 'arial';
      font-family: arial, helvetica, sans-serif;
--- a/packages/fluent-editor/src/assets/size.scss
+++ b/packages/fluent-editor/src/assets/size.scss
@ -2,7 +2,7 @@
@import './common';
 .ql-formats {
  .ql-size.ql-picker {
-    width: 70px;
+    width: 98px;
    span.ql-picker-label:before,
    .ql-picker-options > span.ql-picker-item::before {
      content: "Normal";
--- a/packages/fluent-editor/src/config/icons.config.ts
+++ b/packages/fluent-editor/src/config/icons.config.ts
@ -274,7 +274,7 @@ export const SCREENSHOT_ICON = `<svg width="16px" height="16px" viewBox="0 0 16
 </g>
 </svg>`

-export const CODE_ICON = `<i class="icon-code"></i>`
+export const CODE_ICON = `<svg t="1721956397010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4254" width="20" height="20"><path d="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" opacity=".224" p-id="4255"></path><path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z" p-id="4256"></path></svg>`

 export const MENTION_ICON = `<i class="icon-set-keyword"></i>`

@ -282,11 +282,11 @@ export const QUICK_MENU_ICON = `<i class="icon-publish"></i>`

 export const SAVE_ICON = `<i class="icon-save"></i>`

-export const HELP_ICON = `<i class="icon-help"></i>`
+export const HELP_ICON = `<svg t="1721963829631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9764" width="20" height="20"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" fill="#000000" p-id="9765"></path><path d="M512 746.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#000000" p-id="9766"></path><path d="M512 245.333333c-76.8 0-138.666667 61.866667-138.666667 138.666667 0 17.066667 14.933333 32 32 32s32-14.933333 32-32c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667c0 27.733333-53.333333 76.8-91.733334 100.266667-8.533333 6.4-14.933333 17.066667-14.933333 27.733333v106.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-89.6c34.133333-25.6 106.666667-83.2 106.666667-145.066667 0-76.8-61.866667-138.666667-138.666667-138.666667z" fill="#000000" p-id="9767"></path></svg>`

 export const SCROLL_TABLE_ICON = `<i class="icon-switch"></i>`

-export const GLOBAL_LINK_ICON = `<i class="icon-connect-code" style="color: #5170FF;"></i>`
+export const GLOBAL_LINK_ICON = `<svg t="1721963743677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8628" width="20" height="20"><path d="M713.130667 283.221333V228.352a9.159111 9.159111 0 0 0-9.130667-9.130667H265.102222a9.159111 9.159111 0 0 0-9.102222 9.130667v54.869333c0 5.034667 4.096 9.130667 9.130667 9.130667H704a9.159111 9.159111 0 0 0 9.130667-9.130667z m-448 100.579556a9.130667 9.130667 0 0 0-9.130667 9.130667v54.869333c0 5.006222 4.096 9.130667 9.130667 9.130667h210.289777a9.159111 9.159111 0 0 0 9.159112-9.130667v-54.869333a9.159111 9.159111 0 0 0-9.159112-9.130667H265.130667z m164.579555 516.551111H164.579556V95.800889h640v279.352889c0 5.034667 4.096 9.159111 9.130666 9.159111h64a9.159111 9.159111 0 0 0 9.130667-9.159111V50.090667c0-20.252444-16.327111-36.579556-36.551111-36.579556H118.840889c-20.195556 0-36.551111 16.327111-36.551111 36.579556v896c0 20.195556 16.327111 36.551111 36.551111 36.551111h310.869333a9.159111 9.159111 0 0 0 9.130667-9.130667v-64a9.159111 9.159111 0 0 0-9.130667-9.159111z" fill="#000000" fill-opacity=".85" p-id="8629"></path><path d="M837.859556 656.298667l-107.861334 186.794666-68.977778-39.822222 107.861334-186.794667 68.977778 39.822223z" fill="#000000" p-id="8630"></path><path d="M691.114667 514.844444a159.146667 159.146667 0 0 1 217.315555-58.225777 159.061333 159.061333 0 0 1 58.197334 217.315555l-55.637334 96.369778-68.977778-39.822222 55.637334-96.369778a79.416889 79.416889 0 1 0-137.557334-79.416889l-55.637333 96.369778-68.977778-39.822222 55.637334-96.369778V514.844444z m-28.558223 208.782223l-56.462222 97.792a79.416889 79.416889 0 0 0 137.557334 79.388444l56.462222-97.763555 68.977778 39.822222-56.462223 97.763555a159.061333 159.061333 0 1 1-275.484444-159.061333l56.433778-97.763556 68.977777 39.822223z" fill="#000000" p-id="8631"></path></svg>`

 export const FULLSCREEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1">
    <path fill="#333333" d="M64 384h96V160h224.2V64H64zM639.8 64v96H864v224h96V64zM864 864H639.8v96H960V639.61h-96zM160 639.61H64V960h320.2v-96H160z"/>
--- a/packages/fluent-editor/src/custom-clipboard.ts
+++ b/packages/fluent-editor/src/custom-clipboard.ts
@ -116,7 +116,7 @@ class CustomClipboard extends Clipboard {
    const files = Array.from(e.clipboardData.files || [])
    const msExcelCheck = /<meta.*?Microsoft Excel\s[\d].*?>/

-    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption.imageUploadToServer && files.length > 0) {
+    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption?.imageUploadToServer && files.length > 0) {
      this.quill.uploader.upload(range, files)
    } else {
      const msWordCheck1 =
--- a/packages/fluent-editor/src/fluent-editor.ts
+++ b/packages/fluent-editor/src/fluent-editor.ts
@ -33,6 +33,23 @@ const registerModules = function () {
    Icons[iconKey] = ICONS_CONFIG[iconKey]
  })

+  const SnowTheme = Quill.imports['themes/snow']
+  SnowTheme.DEFAULTS = {
+    modules: {
+      toolbar: {
+        handlers: {
+          ...SnowTheme.DEFAULTS.modules.toolbar.handlers,
+          undo() {
+            this.quill.history.undo()
+          },
+          redo() {
+            this.quill.history.redo()
+          },
+        }
+      }
+    }
+  }
+
  Quill.register(
    {
      'modules/toolbar': Toolbar,