vue实现富文本

1、引入插件

npm install vue-quill-editor --save

2、在封装的组件中引入并注册

3、使用注册的组件内容

4、根据自身使用情况选择全局注册还是某一页面注册使用，显示效果如下：

5、回显显示，使用v-html

注意： 是为了将文本样式与富文本框输入的样式保持一致（也可自己写样式）

---

其他（功能优化）

1、输入框提示文本

 editorOption: {
	placeholder: "请输入需要编写的内容...",
},

2、内容控件汉化

提示：将代码样式复制到对应组件中即刻

3、显示效果如下：

4、编辑图片

4.1、安装依赖包，包含编辑器包，拖拽包，缩放包

npm i quill-image-drop-module  -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件

4.2、组件里引入使用

import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册

4.3、在data中配置`

      editorOption: {
        placeholder: "请输入需要编写的内容...",
        modules: {
          imageDrop: true, //图片拖拽
          imageResize: {
            //放大缩小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          // 需要重置工具，不然富文本工具上的功能会缺失
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36",
                ],
              },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"], // 链接、图片、视频
          ],
        },
      },

4.4、将在webpack中对插件进行配置

提示：找到文件中vue.config.js进行配置

const webpack = require('webpack') // 引入webpack
module.exports = {
// 在vue.config.js中configureWebpack中配置
configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

注意：配置完成后需要重启服务

---

完整组件代码

链接: 官方链接

总结

供自己学习笔记使用