feat: editor module BlotFormatter

package.json

@@ -24,6 +24,7 @@
     "dompurify": "^3.0.5",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
+    "quill-blot-formatter": "^1.0.5",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4"

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   pinia-plugin-persistedstate:
     specifier: ^3.2.0
     version: 3.2.0(pinia@2.1.6)
+  quill-blot-formatter:
+    specifier: ^1.0.5
+    version: 1.0.5(quill@1.3.7)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -1118,6 +1121,11 @@ packages:
       regexp.prototype.flags: 1.5.0
     dev: false
 
+  /deepmerge@2.2.1:
+    resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /define-lazy-prop@2.0.0:
     resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
@@ -1613,6 +1621,15 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /quill-blot-formatter@1.0.5(quill@1.3.7):
+    resolution: {integrity: sha512-iVmuEdmMIpvERBnnDfosWul6VAVN6tqQRruUzAEwA9ZbQ/Ef7DTHGZDUR4KklXpxM+z50opFp6m1NhNdN6HJhw==}
+    peerDependencies:
+      quill: ^1.3.4
+    dependencies:
+      deepmerge: 2.2.1
+      quill: 1.3.7
+    dev: false
+
   /quill-delta@3.6.3:
     resolution: {integrity: sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==}
     engines: {node: '>=0.10'}

src/components/quill-editor/EditorSettingsMenu.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-// 引入图标字体
-import { Icon } from '@iconify/vue'
 
 // 引入 css 动画
 import 'animate.css'

src/components/quill-editor/QuillEditor.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { defineAsyncComponent, computed, ref, onBeforeMount } from 'vue'
+
+// 引入编辑器
 import { QuillEditor } from '@vueup/vue-quill'
+// 引入 quill module: for resizing and realigning images and iframe video
+import BlotFormatter from 'quill-blot-formatter'
 
 // 自定义 quill 的两个主题，第二个主题暂时懒得动
 import '@/styles/editor/editor.snow.scss'
@@ -35,6 +39,7 @@ const { editorHeight, mode, theme, isSave, content } = storeToRefs(
  * @param {boolean} isShowTitle - 是否显示标题
  * @param {boolean} isShowSettings - 是否显示编辑器设置
  */
+
 const props = defineProps<{
   height?: number
   isShowToolbar: boolean
@@ -46,6 +51,20 @@ const props = defineProps<{
 // 编辑器实例
 const editorRef = ref<typeof QuillEditor>()
 
+// 编辑器 modules
+const modules = {
+  name: 'blotFormatter',
+  module: BlotFormatter,
+  // see: https://github.com/Fandom-OSS/quill-blot-formatter/blob/master/src/Options.js
+  options: {
+    overlay: {
+      style: {
+        border: '2px solid var(--kungalgame-blue-3)',
+      },
+    },
+  },
+}
+
 // 编辑器的高度
 const editorHeightStyle = computed(
   () => `height: ${props.height ? props.height : editorHeight.value}px`
@@ -106,6 +125,7 @@ const handleTextChange = async () => {
       :content="valueHtml"
       :style="editorHeightStyle"
       :theme="theme"
+      :modules="modules"
       :toolbar="mode"
       :options="editorOptions"
       @textChange="handleTextChange"
@@ -192,5 +212,21 @@ const handleTextChange = async () => {
       font-style: oblique;
     }
   }
+
+  /* BlotFormatter 插件的样式 */
+  .blot-formatter__toolbar-button {
+    margin: 0 5px;
+    border: none !important;
+    background: var(--kungalgame-trans-white-9) !important;
+    svg {
+      border: 1px solid var(--kungalgame-blue-4) !important;
+      background: var(--kungalgame-trans-white-2) !important;
+    }
+  }
+  .is-selected {
+    svg {
+      background: var(--kungalgame-trans-blue-1) !important;
+    }
+  }
 }
 </style>

src/styles/reset.css

@@ -7,7 +7,7 @@
   padding: 0;
   text-decoration: none;
   list-style: none;
-  font-family: serif, system-ui;
+  font-family: system-ui;
   box-sizing: border-box;
 }