富文本编辑器组件vue-quill-editor的使用及注意点（一）

1.下载插件vue-quill-editor

npm install vue-quill-editor

2.在需要使用编辑器的组件中引入插件vue-quill-editor，并在main.js中引入打包好的样式文件

// 组件中引入vue-quill-editor
// editor.vue
import { quillEditor } from 'vue-quill-editor' 

// main.js中引入样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

注：尽量不要在组件中导入样式文件，经测试，如果在组件中导入而非在main.js中导入时，内容回显时有些样式会失效

3.注册quillEditor并在template中使用它

// editor.vue
<template>
    <div class="editor-container">
      <quill-editor class="info-editor" v-model="content" ref="QuillEditor" :options="editorOption">
      </quill-editor>
    </div>
</template>

// editor.vue
export default {
  name: "editor",
  components: {
    quillEditor
  }
}

4.定义editorOption

// editor.vue
// 工具栏配置
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],


        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction


        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],


        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
        ['link', 'image', 'video'],
        ['clean']                                         // remove formatting button
    ]
// 在data中初始化editorOption
        data() {
            return {
                content: '',
                editorOption: {
                    placeholder: '请输入编辑内容',
                    theme: 'snow', //主题风格
                    modules: {
                        toolbar: {
                            container: toolbarOptions, // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('#quill-upload input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }, // 富文本编辑器配置
            }
        }

此时，编辑器上方就出现了设置的功能按钮，但通过按钮外形无法了解其功能，所以我们给每一个按钮都添加一个title，这样鼠标悬停时会提示其功能。

// utils.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'),
        aSpan= oToolBar.querySelectorAll('span');
  aButton.forEach((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 if(item.className === 'ql-list'){
     item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
    }else if(item.className === 'ql-header'){
     item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
    }else{
     item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item)=>{
    if(item.className!='ql-color'&&item.className!='ql-background'){
     item.parentNode.title = titleConfig[item.classList[0]];
    }
  });
  aSpan.forEach((item)=>{
    if(item.classList[0]==='ql-color'){
      item.title = titleConfig[item.classList[0]];
    }else if(item.classList[0]==='ql-background'){
      item.title = titleConfig[item.classList[0]];
    }
  });
}

// editor.vue
// 组件加载时调用引入的addQuillTitle方法
  mounted() {
      addQuillTitle();
      if (this.id) {
          this.dataInit(this.id);
      }
  },

到此时，我们就可以用编辑器来编写我们的文章了，但是在对编辑文字进行格式设置时，发现没有变化。这很有可能是你在项目中引入了reset.css文件，导致一些样式被覆盖，如strong元素在reset.css初始化中，去除了粗体效果，如果想在编辑器中保留加粗效果，可以直接在reset.css中删除对strong的设置。

5.完成编辑并实现前端渲染

编辑完成后，将数据提交到数据库保存。然后前端向服务器请求数据，由于数据是HTML格式，所以前端使用保留html格式的vue指令v-html来完成数据的渲染。

注：渲染时会发现许多样式都丢失了。原因在于，编辑器的样式是绑定在编辑器的容器（.ql-editor）和主题(.ql-snow)类名上的，所以前端渲染时，如果要保留这些样式，需同样定义相同类名的父元素

// article.vue
    <div class="ql-snow">
        <div class="ql-editor" v-html="article.content"></div>
    </div>

以上就完成了编辑器vue-quill-editor的基本使用