vue3怎么使用vueup/vue-quill富文本并限制输入字数

这篇文章主要讲解了“vue3怎么使用Vueup/vue-quill富文本并限制输入字数”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3怎么使用vueup/vue-quill富文本并限制输入字数”吧！

一、效果展示

二、npm

npm install @vueup/vue-quill@alpha --save

三、main.js引入

import { QuillEditor } from '@vueup/vue-quill'import '@vueup/vue-quill/dist/vue-quill.snow.CSS';app.component('QuillEditor',QuillEditor)

四、页面使用

<quill-editor v-model:content="htmlValue" ref="myQuillEditor" contentType="html" :options="editorOption" @update:content="onEditorChange($event)"></quill-editor><div class="editor_length">{{ TiLength }}/500</div>

      const htmlValue=ref("")      const TiLength =ref(0)      const myQuillEditor=ref(null)      const editorOption=Reactive({        theme: "snow", // 主题            // debug: 'info',        placeholder: "请输入其他说明",        modules: {          toolbar: {            container: [              ["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: [] }]              // ["clean", "link", "image"]              // ['addBtn']            ] // 自定义工具栏选项          }        }      })      const onEditorChange=(e)=>{        // console.log(myQuillEditor.value.getText().length);        // console.log(TiLength.value);        TiLength.value =myQuillEditor.value.getText().length-1        if(TiLength.value>500){          myQuillEditor.value.setText(myQuillEditor.value.getText().slice(0,500))          return          }      }                return{        htmlValue,editorOption,onEditorChange,TiLength,myQuillEditor  }

感谢各位的阅读，以上就是“vue3怎么使用vueup/vue-quill富文本并限制输入字数”的内容了，经过本文的学习后，相信大家对vue3怎么使用vueup/vue-quill富文本并限制输入字数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！