富文本编辑器 vue-quill-editor 的使用

vue-quill-editor 的使用

一、使用步骤

1.引入库

npm下载 npm install vue-quilt-editor --save
npm install quill // 这个要安装，否则报错 Cannot read property 'imports' of undefined
npm下载 quill-image-drop-module --save ：允许粘贴图像并将其拖放到编辑器
npm下载 quill-image-resize-module --save ：允许调整图像大小

这是vue2里的示例

//在组件中使用

import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

//自定义字体类型
var fonts = [
  "Microsoft-YaHei",
  "SimSun",
  "SimHei",
  "KaiTi",
  "Arial",
  "Times-New-Roman"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);


// 引入相关css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

2.在vue-config配置

代码如下（示例）：如果你的项目是vue-cli3创建的，在vue.conf.js（如果没有这个文件，就手动在项目根目录和src同级，创建vue.conf.js），加上下面的配置：

  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        "window.Quill": "quill/dist/quill.js",
        Quill: "quill/dist/quill.js",
      }),
    ],
  },
  /*项目是vue-cli3创建的，在vue.conf.js*/
const webpack = require('webpack')
module.exports = {
    chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      'window.Quill': 'quill'
    }])
}
 /*项目是vue-cli2创建的，要配置build文件夹中的base.conf.js文件*/
 插入：var webpack = require('webpack');
然后在   module.exports= {...} 加入下面的代码：
plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ],

富文本的配置 在data中定义

  components: {
    quillEditor
  },
   editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike", "image"],
            ["formula", "clean"],
            ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ font: fonts }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            [{ direction: "rtl" }]
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        }
      }
//在HTML中的使用
    <quill-editor
            v-if="addRegulationsModal"
            ref="text"
            v-model="form.contentText"
            :options="editorOption"
            class="myQuillEditor"
          />

---

总结

上面是基本的在vue2组件中的用法
Vue Element UI 之富文本插件实现图片调整大小（quill-image-resize-module）、图片粘贴（quill-image-drop-module）
quill富文本 插件quill-image-resize-module 改变插入图片大小模块引入报错问题