vue-quill-editor 富文本使用

---

一，安装配置文件

1 安装

npm install vue-quill-editor –save

2 导入富文本编辑器对应的样式

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

3， vue中注册

Vue.use(VueQuillEditor)

二 使用.vue组件中使用

<quill-editor v-model="value" @change="onEditorChange($event)"></quill-editor>
 <div style="text-align:right">{{TiLength}}/200</div>

文档地址：

https://www.kancloud.cn/liuwave/quill/1434140

2.字数限制

  data () {
    return {
      // 限制长度
      TiLength: 0
}
    // 限制数据长度
    onEditorChange (event) {
      event.quill.deleteText(200, 1)
      if (this.addForm.useExplain === 0) {
        this.TiLength = 0
      } else {
        this.TiLength = event.quill.getLength() - 1
      }
    }