Vue使用vue-quill-editor实现富文本编辑器

1.先看效果

2.安装

 npm install vue-quill-editor –save

3.全局注册和引入

 // 富文本编辑器
 import { quillEditor,Quill } from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 Vue.use(quillEditor)

4.页面使用

      html标签

    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>

      绑定的事件

  methods: {
    onEditorReady() {
      // 准备编辑器
    },
    onEditorBlur() {
      this.str = this.escapeStringHTML(this.content);
    }, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件

    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
  },

可以新增一个自定义功能，当我们鼠标放在富文本头部按钮的上，提示一些中文信息。

首先我们新建一个js文件

const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
  }
  export function addQuillTitle () {
    const oToolBar = document.querySelector('.ql-toolbar'),
      aButton = oToolBar.querySelectorAll('button'),
      aSelect = oToolBar.querySelectorAll('select')
    aButton.forEach(function (item) {
      if (item.className === 'ql-script') {
        item.value === 'sub' ? item.title = '下标' : item.title = '上标'
      } else if (item.className === 'ql-indent') {
        item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
      } else {
        item.title = titleConfig[item.classList[0]]
      }
    })
    aSelect.forEach(function (item) {
      item.parentNode.title = titleConfig[item.classList[0]]
    })
  }
  
  

然后将我们写好的js文件引入到我们的页面里：

import { addQuillTitle } from "../utils/quillTitle";

最后需要在我们的生命周期mounted中调用一下：

  mounted() {
    addQuillTitle();
  },

我们还可以根据需要选择自己需要的按钮，不需要的按钮我们则不配置，可以在editorOption：{}配置：

    const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ size: ["15px", "16px", "17px",'20px','40px'] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
];

  editorOption: {
        placeholder: "请输入文本...",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
      },

其次，我们还可以将富文本头部的按钮选项部分的内容变成中文，直接在css中修改：

.editor {
  line-height: normal !important;
  height: 500px;
}
.quill-editor >>> .ql-editor{
    min-height: 300px !important;
}
.quill-editor >>> .ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.quill-editor >>> .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.quill-editor >>> .ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="15px"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="15px"]::before {
  content: "15px";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="16px"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="17px"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="17px"]::before {
  content: "17px";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="20px"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="40px"]::before {
  content: "40px";
}

.quill-editor >>> .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.quill-editor >>> .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "标准";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="1"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="2"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="3"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="4"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="5"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-label[data-value="6"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-header
  .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.quill-editor >>> .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.quill-editor >>> .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="serif"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="monospace"]::before,
.quill-editor
  >>> .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}

最后这个地方也需要修改一下：

 //设置字体大小
 let fontSizeStyle = Quill.import("attributors/style/size"); //引入这个后会把样式写在style上
 fontSizeStyle.whitelist = ["15px", "16px", "17px",'20px','40px'];
 Quill.register(fontSizeStyle, true);

 //设置字体样式
 let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
 let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
 Font.whitelist = fonts //将字体加入到白名单
 Quill.register(Font, true)