init

build/webpack.dev.conf.js

@@ -45,6 +45,9 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     }
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      'window.Quill': 'quill/dist/quill.js',
+    }),
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),

build/webpack.prod.conf.js

@@ -28,6 +28,9 @@ const webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      'window.Quill': 'quill/dist/quill.js',
+    }),
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env

src/components/Editor/index.vue

@@ -21,6 +21,7 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import cookie from "@/utils/cookie";
+import ImageResize from 'quill-image-resize-module';
 
 export default {
   name: "Editor",
@@ -82,7 +83,15 @@ export default {
             [{ align: [] }], // 对齐方式
             ["clean"], // 清除文本格式
             ["link", "image"], // 链接、图片
-          ]
+          ],
+          imageResize: {
+            displayStyles: {
+              backgroundColor: "black",
+              border: "none",
+              color: "white",
+            },
+            modules: ["Resize", "DisplaySize", "Toolbar"],
+          }
         },
         placeholder: "请输入内容",
         readOnly: this.readOnly,
@@ -118,6 +127,7 @@ export default {
     },
   },
   mounted() {
+    Quill.register('modules/imageResize',ImageResize);
     new Promise((resolve, reject) => {
       var datats = {
         imageStatus: this.uploadStatus,