Quill组件介绍
官方网站
https://vueup.github.io/vue-quill
简单介绍一下Quill:一个功能齐全的轻量级富文本编辑器,支持Text和HTML格式的内容
但是在返回HTML时如果要再转化为text再去统计字符会需要有一层循环遍历,稍微会影响一点性能,以下介绍一种笔者觉得比较好的方法
统计字数的方法
调用@update:content这个方法,在每次更新时,从quill实例拿到Length。从而实现字数实时统计的目的。
<div class="edit-content">
<el-text>字数:{{ length }}</el-text>
<QuillEditor id="editor"
toolbar="full" contentType="html" v-model:content="content"
@update:content="updateQuill" @ready="onEditorReady">
</QuillEditor>
</div>
<script setup>
import { QuillEditor,Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
const quill = ref(null)
const length = ref(0)
const onEditorReady = (editor) => {
quill.value = editor
}
const updateQuill = () => {
length.value = quill.value.getLength()
}
<script>