在vue3中富文本编辑器Quill组件返回html时统计字数方法

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>