vue插件之vue-quill-editor

首先送上官网地址：点这是跳转官网。
接下来按步骤食用：

npm install quill --save

在main.js全局引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

接下来可以在模块中使用，先引入富文本组件

import { quillEditor } from 'vue-quill-editor'
-------------------------------------------
 components: {
	quillEditor
  },

以下是html

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

onEditorBlur(e){
      console.log(e, '失去焦点事件');
    },
    onEditorFocus(e){
      console.log(e, '获得焦点事件');
    },
    onEditorChange(e){
      console.log(e, '内容改变事件');
    },

在data中可以配置富文本上面功能的多少

   content:null,
    editorOption:{
      modules:{
        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': ['small', false, 'large', 'huge'] }], // 字体大小
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
          [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
          [{ 'font': [] }],     //字体
          [{ 'align': [] }],    //对齐方式
          ['clean'],    //清除字体样式
          // ['image','video']    //上传图片、上传视频
        ]
      }
    },

这个插件默认鼠标移动到按钮上没有提示，可以通过下面方法加上去。
先定义全部会出现的按钮类名

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": "清除字体样式",
  "ql-upload": "文件"
};

接下来在mounted中

  mounted() {
    // 富文本提示信息
    this.$nextTick(() => {
      const oToolBar = document.getElementsByClassName('ql-editor')[0]
      const   aButton = oToolBar.querySelectorAll('button');
      const  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]];
      });
    })
  },

注意：不在 this.$nextTick 里面会报错。。

over。