quill富文本编辑

一. 什么是富文本编辑

传统的textArea输入框无法对输入的内容进行格式的转换，富文本编辑器的功能和word一样，可以输入的内容格式进行一些修改，可以添加图片等等，这种就叫富文本编辑器。如下图：

二. 安装依赖

npm install quill
npm install vue-quill-editor

三. 引入

在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
//三个css引用，不然样式无法展示，也可在具体的vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

四. 使用

1.配置工具栏

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 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': [] }],
  ['image'],
  ['clean']
]

从代码中可以看出大概可以分为四类：

1.只需要些功能名的
	加粗 - bold；
	斜体 - italic
	下划线 - underline
	删除线 - strike
	引用- blockquote
	代码块 - code-block
	公式 - formula
	图片 - image
	视频 - video
	清除字体样式- clean

这一类的引用 直接['name','name']这种格式就好了

2.需要填写默认值的
	标题 - header
	[{ 'header': 1 }, { 'header': 2 }] 值字体大小

	列表 - list
	[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet

	上标/下标 - script
	 [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super

	缩进 - indent
	[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

	文本方向 - direction
	[{ 'direction': 'rtl' }],    值rtl

3.下拉列表选择展示的
	大小 - size
	 [{ 'size': ['small', false, 'large', 'huge'] }],  

	标题 - header
	[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

4.只需填写一个空数组的
	颜色 - color
	背景颜色 - background
	字体 - font
	文本对齐 - align

2. 使用（包含图片上传）

<el-form-item label="内容">
	<el-upload
		class="avatar-uploader"
		:action="serverUrl"
		name="file"
		:show-file-list="false"
		:on-success="uploadSuccess"
		:on-error="uploadError"
		:before-upload="beforeUpload"
	/>
	<quill-editor
		ref="myQuillEditor"
		v-model="form.content"
		:options="editorOption"
		@blur="onEditorBlur($event)"
		@focus="onEditorFocus($event)"
		@change="onEditorChange($event)"
	/>
</el-form-item>

3. 图片上传前，校验图片格式和大小

// 富文本图片上传前
beforeUpload(file) {
      let fileType = ['jpeg','JPEG','jpg','JPG','png','PNG']
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = (fileType.indexOf(testmsg) == -1)
      if (extension) {
        this.$message({
          message: '上传文件只能是jpg或者png格式!',
          type: 'error'
        })
        return false// 必须加上return false; 才能阻止
      }
      const isLimit = (file.size / 1024) < 40 || (file.size / 1024) > 150
      if (isLimit) {
        this.$message({
          message: '上传文件大小为40k-150k',
          type: 'error'
        })
        return false
      }
      // 显示loading动画
      this.quillUpdateImg = true
      return !extension || !isLimit
    },

4. 图片上传成功后插入指定位置

uploadSuccess(response, file) {
      // response为图片服务器返回的数据
      try {
        // 获取富文本组件实例
        const quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (response.code === '200') {
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', response.data.filePath)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
      } catch (e) {
        console.log(e)
        this.$message.error('图片插入失败')
      } finally {
        // loading动画消失
        this.quillUpdateImg = false
      }
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    },

注意：vue-quill-editor默认是将上传的图片转换为Base64编码插入文本中，如果图片较多或者过大，将导致参数过长，可能导致报错。
这里我们将图片上传到服务器后，前台获取后台返回图片的url地址，将图片url地址插入光标所在位置的文本中，达到同样的效果。