vue-quill-editor 富文本使用

最新推荐文章于 2025-09-10 01:26:47 发布

原创最新推荐文章于 2025-09-10 01:26:47 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

19 篇文章

订阅专栏

本文档介绍了如何在Vue项目中安装和配置VueQuillEditor，以及如何在.vue组件中使用它进行富文本编辑。同时，提供了在编辑器中实施字数限制的方法，确保内容不超过预设的最大长度。通过监听`onEditorChange`事件，动态更新字数计数并限制超出的字符。

文章目录

一，安装配置文件
二使用.vue组件中使用
- 2.字数限制

一，安装配置文件

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
      }
    }