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

1.安装quill-editor编辑器

npm install vue-quill-editor --save

2.在组件中引入(也可以全局引入，略有不同)

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

3.template内容

<quill-editor ref="myQuillEditor" :options="editorOption" />

4.components及data设置

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        theme: "snow", // 默认主题
        placeholder: "请在这里输入", // 默认输入内容 
      },
    };
  },
};

效果图：

5.自定义功能

 在<quil-editor>标签中，在editorOption对象中添加modules对象，在modules对象中再添加toolbar数组，用于设置功能项

  data() {
    return {
      editorOption: {
        theme: "snow", // 默认主题
        placeholder: "请在这里输入", // 默认输入内容 
        modules: {  // 富文本编辑器自主设计保留功能
          toolbar: [
            "bold", // 加粗 
            "underline", // 下划线
            { size: ["small", false, "large", "huge"] }, // 字体大小
            { color: [] }, // 字体颜色
          ],
        },
      },
    };
  },

效果图：

 

以上是引用富文本编辑器的全部内容 ，下面是完整的代码：

<template>
  <quill-editor ref="myQuillEditor" :options="editorOption" />
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "test2",
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        theme: "snow", // 默认主题
        placeholder: "请在这里输入", // 默认输入内容 
        modules: {  // 富文本编辑器自主设计保留功能
          toolbar: [
            "bold", // 加粗 
            "underline", // 下划线
            { size: ["small", false, "large", "huge"] }, // 字体大小
            { color: [] }, // 字体颜色
          ],
        },
      },
    };
  },
};
</script>

 

这篇博文有较详细的功能介绍，给了我很大帮助：https://www.jb51.net/article/147830.htm

在开发中遇到几个比较棘手的问题：

1）样式问题：在按以上方式引入编辑器到项目中后，发现富文本编辑器样式出现一些问题，具体表现为字体大小和字体颜色功能按键下沉，如图：

 刚开始以为样式就是的，虽然有点丑，但没去在意，直到想起要写这篇博文，就新建了项目试一下，发现事情并不是我想的这样。。。完整的样式（整齐、平整）：

追踪问题，发现问题在于项目中同时引入了elementui框架，而这个富文本模块放在el-form中，被el-form默认的样式影响了，定位到这些默认样式：

解决方案：

自定义css样式就好了，问题在于在哪里编写，编写什么样式，这里方法不唯一，我的办法是在编辑器默认的类中添加一个行高，当然别忘了添加/deep/：

// 富文本编辑器样式问题调整，受到elementui的样式影响，使得字体大小选择项和颜色项下移，限定行高解决此问题
/deep/ .ql-formats {
  line-height: 15px;
}

2）字体大小样式不显示问题：在vue中用v-model绑定富文本编辑器，点击提交按钮时，编辑器会生成一段html文本（字符串），保存到v-model绑定的属性中，用于提交数据和在其他页面中显示（富文本编辑器的核心需求）利用v-html，即可把字符串渲染为html代码：<div v-html="htmlString"> </div>

问题在于，当我试着这样在页面中展示时，发现字体大小样式没有变化，而其余三种样式都发生变化了（此处场景仅限于上面功能选择后的例子）。打开控制器查看代码，发现了问题所在：

从上面视图可看出，字体加粗，下划线，改变颜色都成功显示，唯有字体大小没有显示，而从代码可看出，只有改变字体大小是引用了富文本编辑器自带的类，其余都是一段html自带标签或者style，问题找到了，肯定是在渲染后的页面中，找不到ql-size-huge这个类，所以123当作正常显示。那么，为什么会出现这个问题呢？原因在于我在引用编辑器的时候，并没有使用全局引用，而只是在此组件中引入，这样导致在其他组件中根本没有ql-size-huge这个类。在vue-cli脚手架中即是没有在main.js中引入此编辑器。所以只要重新全局引用即可。

3）自定义字体大小：用过quil-editor这个编辑器后，可能会有一种需求，想要定义多种字体大小样式，而我们会发现，此编辑器只提供4种字体大小：

这个问题网上有很多的解决方案，但似乎都离不开更改quill-editor自带的包，这种方法的弊端在于，在开发环境中更改后，发布到线上环境要重新更改一次，而且如果以后要升级该编辑器版本，要重新维护，这是一件相当麻烦的事。而我还没有更好的解决方案。