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

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

简单介绍一下，看过上面的图，您大致对富文本编辑器有个了解了，传统的textArea输入框输入的内容没法做格式上的更改，它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。

1、ueditor
国内人用ueditor的比较多，真的很中国化，经常在贴吧或论坛里看到这种风格的富文本编辑器。

2、bootstrap-wysiwyg
这个插件是bootstrap官网推荐的。

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

二、主要研究学习第三种vue-quill-editor富文本编辑
在HUI-VUE中使用
1、安装依赖

npm install vue-quill-editor –save

2、使用
可以在main.js中引入

import { quillEditor } from 'vue-quill-editor'

//一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入

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

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

1. 如果有语言切换的需求，就需要准备语言包按照api的引用方法实现；
2. 如果只有一种语言的要求，就可以通过css的content属性更改。

2）按钮多为图标显示，用户使用起来不能清楚明白功能按钮的作用，需要加上一个鼠标停留按钮提示的交互：

首先建一个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]]
  })
}

其次将quill-title.js引入

import { addQuillTitle } from './modules/quill-title.js'

最后在生命周期mounted中调用方法：

addQuillTitle(); 

最终实现了鼠标悬停按钮完成tooltip提示。

4、问题
1）在富文本编辑器里输入并排布好的版面和样式在回显时候出现不一致。字体大小样式丢失，首先看编辑器完成返回的html字符串：

'<h1 class="ql-align-center">《 <strong style="color: rgb(51, 51, 51);">虞美人 》</strong></h1><h2 class="ql-align-center"> 李煜</h2><p><br></p><h3><br></h3><h3 class="ql-align-center"> <span class="ql-size-large" style="color: rgb(230, 0, 0);">春花</span>秋月何时了，<span class="ql-size-large" style="color: rgb(0, 138, 0);">往事</span>知多少？小楼昨夜又<span class="ql-size-large" style="color: rgb(240, 102, 102);">东风</span>，故国不堪回首月明中！</h3><h2 class="ql-align-center"><span class="ql-size-large"> </span>雕栏玉砌应犹在，只是朱颜改。<span class="ql-size-large" style="color: rgb(161, 0, 0);">问君能有几多愁？恰似一江春水向东流。</span></h2><p  class="ql-align-justify"><br></p>'

会发现在编辑器返回的字符串中，字号在加大的情况下Quill编辑器会在标签上增加一个class，然后再去定位这个class的样式丢失的原因：

找到quill中控制回显样式的css文件不难发现在内部的类和标签样式前需要有一个父级元素class=”ql-editor”的class名，来确保子元素样式被匹配到。最后问题得以解决。

三、图片上传实现方式：
vue-quill-editor插入图片的方式是将图片转为base64再放入内容中，这样就会产生一个问题，如果图片比较大的话，富文本的内容就会很大，内容存在数据库中的，这样一来，一方面会占用大量的数据库存储空间，另一方面当图片太大的时候富文本的内容，会超过数据库的存储上限，从而会产生内容被截断从而显示不全的问题（即使是text类型，也有存储上限65535）。

那么问题来了，如何将图片上传到自己的服务器或第三方服务，然后将获得的图片url插入到文本中呢？大致有两个方法，其一是将任务交给服务端，服务端截取base64图片并转化为文件，将其路径或者url替换原来的图片数据；其二是对控件本身下手，首先将图片上传，然后插入到富文本中。