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

一、什么是富文本编辑器?

 vue-quill-editor
      这个据说大企业用的比较多，百度一下技术背景，对它的评价是不限制框架，但是需要定制，理念很先进。

• 1.安装    npm install vue-quill-editor –save
• 2.使用    在main.js中全局引入    import { quillEditor } from 'vue-quill-editor'
• 3.
• //一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
• //这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入 

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css' 

• 4.新增自定义功能

• 1 ) Quill中富文本编辑的操作按钮都为英文，需要中文译一下，根据项目功能需求有两种情况：

•        如果有语言切换的需求，就需要准备语言包按照api的引用方法实现；

•        如果只有一种语言的要求，就可以通过css的content属性更改。

   

• 2）按钮多为图标显示，用户使用起来不能清楚明白功能按钮的作用，需要加上一个鼠标停留按钮提示的交互：首先在根目录src中建一个文件test，在test中建立quill-title.js将每个按钮的对应class拾取出来进行提示语循环增加title，代码实现如下：

 

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 '@/test/quill-title.js'    //路径一定要写对
• 在生命周期mounted中调用   addQuillTitle();

 注意：如果富文本的高度较低，解决方案：//写在scope中样式是不生效的

<style lang="scss">
.quill-editor{
  height: 300px;
  .ql-container{
    height: 300px;
  }
}
</style>

•  在引入之后我们可以想使用自定义组件的步骤一样：
• 引入、注册、调用
• 注册写在  component：{ quillEditor }
• 调用： 作为标签名 <quillEditor></quillEditor>