vue-quill-editor 富文本编辑器插件介绍

Iblog项目中博文的文本编辑器采用了vue-quill-editor插件，本文将简单介绍其使用方法。

引入配置

• 安装模块

npm install vue-quill-editor --save

• index.js中引入组件

import VueQuillEditor from 'vue-quill-editor'

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

Vue.use(VueQuillEditor)

注意必须引入样式，否则会出现编辑器排版的混乱。

• 组件中注册

// 在<script></script>之间插入
import { quillEditor, Quill } from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'color': []}, {'background': []}],
  [{'align': []}],
  ['link', 'image'],
  ['clean'],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'font': []}]
]
export default {
  data () {
    return {
      ...
      editorOption: {
        placeholder: '提示语',
        modules: {
          toolbar: {
            container: toolbarOptions,
            ...
          }
        }
      }
      ...
    }
  },
...
  components: {
    'quill-editor': quillEditor
  },
...
}

• 使用组件

<div class="quill-box">
  <template>
    <quill-editor v-model="content"
                  :options="editorOption"
                  ref="content">
    </quill-editor>
  </template>
</div>

经过上述配置即可使用quill富文本编辑器了。

更改图片按钮的事件函数

由于quill插件默认插入图片是base64格式的，若图片较大会引起内容太大无法保存到数据库里面，这样为了上传图片或者插入网络图片，要先更改图片按钮的事件下函数，具体是在editorOption->modules->toolbar中加入handlers对象，并插入名称为image的函数，函数的内容设定为自身所需内容，如下

data () {
  return {
    content: '',
    editorOption: {
      ...
      modules: {
        toolbar: {
          container: toolbarOptions,
          handlers: {
            'image': function (value) {
              if (value) {
                // 自定义内容
              } else {
                this.quill.format('image', false)
              }
            }
          }
        }
      }
    }
  }

插入图片网络图片

若想插入来自网络的图片，即提供图片网址，可以加入以下语句

const range = this.quill.getSelection()
const value = prompt('提示语')
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER)

但是这种方法嵌入的图片暂时不支持调整图片大小。

使用样式渲染内容

使用该插件所保存的内容需经过原样式渲染才能还原编辑时的效果，配置方法为，在<div>标签中加入ql-editor样式，并且内容需为html格式呈现

<div class="ql-editor" v-html="articleContent"></div>