Quellcode durchsuchen

feat: 富文本编辑器集成图片缩放模块,支持拖拽调整大小

Developer vor 2 Wochen
Ursprung
Commit
da1db38450
4 geänderte Dateien mit 28 neuen und 0 gelöschten Zeilen
  1. BIN
      dist.zip
  2. 17 0
      package-lock.json
  3. 1 0
      package.json
  4. 10 0
      src/components/editor/index.vue

BIN
dist.zip


+ 17 - 0
package-lock.json

@@ -24,6 +24,7 @@
         "moment": "^2.30.1",
         "qs": "^6.7.0",
         "quill": "^1.3.6",
+        "quill-image-resize-module": "^3.0.0",
         "sass-loader": "^7.1.0",
         "screenfull": "^4.2.1",
         "scss": "^0.2.4",
@@ -20846,6 +20847,17 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/quill-image-resize-module": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quill-image-resize-module/-/quill-image-resize-module-3.0.0.tgz",
+      "integrity": "sha512-1TZBnUxU/WIx5dPyVjQ9yN7C6mLZSp04HyWBEMqT320DIq4MW4JgzlOPDZX5ZpBM3bU6sacU4kTLUc8VgYQZYw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.4",
+        "quill": "^1.2.2",
+        "raw-loader": "^0.5.1"
+      }
+    },
     "node_modules/quill/node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
@@ -20927,6 +20939,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
+    },
     "node_modules/read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-1.1.0.tgz",

+ 1 - 0
package.json

@@ -30,6 +30,7 @@
     "moment": "^2.30.1",
     "qs": "^6.7.0",
     "quill": "^1.3.6",
+    "quill-image-resize-module": "^3.0.0",
     "sass-loader": "^7.1.0",
     "screenfull": "^4.2.1",
     "scss": "^0.2.4",

+ 10 - 0
src/components/editor/index.vue

@@ -16,6 +16,8 @@ import {
     quillEditor,
     Quill
 } from 'vue-quill-editor'
+import ImageResize from 'quill-image-resize-module'
+Quill.register('modules/imageResize', ImageResize)
 // Quill 1.3.6 的 ui/icons.js 不含 undo/redo,需手动注入到全局 icons 映射,
 // 否则 snow 主题的 buildButtons 会因 icons[name] 为 null 跳过按钮 innerHTML 的渲染。
 const icons = Quill.import('ui/icons')
@@ -81,6 +83,14 @@ export default {
                         maxStack: 50,
                         userOnly: false
                     },
+                    imageResize: {
+                        displayStyles: {
+                            backgroundColor: 'black',
+                            border: 'none',
+                            color: 'white'
+                        },
+                        modules: ['Resize', 'DisplaySize', 'Toolbar']
+                    },
                     toolbar: {
                         container: toolbarOptions,
                         handlers: {