vue 富文本编辑器实时获取字数

为了实时获取Vue富文本编辑器中的字数，你可以使用input事件和innerText属性。以下是示例代码：

<!-- 在模板中定义富文本编辑器 -->
<template>
<div contenteditable="true" @input="countWords">{{ content }}</div>
</template>

<script>
export default {
data() {
return {
content: ''
}
},
methods: {
countWords(event) {
this.content = event.target.innerText;
const wordCount = this.content.trim().replace(/\s+/g, ' ').split(' ').length;
console.log('当前字数：', wordCount);
}
}
}
</script>

当用户在编辑器中输入或删除文本时，会触发input事件，然后使用innerText属性获取编辑器中的所有文本内容。接下来使用JavaScript计算单词数量，并在控制台打印当前的字数。

相关问题

vue 富文本编辑器获取字数

可以使用 JavaScript 的字符串方法来获取富文本编辑器中的字数，你可以先获取编辑器的内容，再使用字符串长度方法计算字数。下面是一个示例代码：

var editorContent = document.getElementById("editor").innerHTML;
var wordCount = editorContent.replace(/<[^>]+>/g, '').replace(/\s+/g, '').length;

上面的代码先获取了 id 为 “editor” 的富文本编辑器的内容，然后使用正则表达式去掉了所有 HTML 标签和空白字符，最后计算字符串长度得到字数。需要注意的是，这种方法只适用于纯文本内容，对于带有样式的内容可能存在一些误差。

vue3富文本编辑器字数限制

vue3富文本编辑器的字数限制可以通过监听正文内容变化来实现。在Vue组件中，可以使用data属性来定义一个字数统计的变量，比如fontCount。然后使用watch属性来监听content的变化，并在其变化时更新字数统计。具体的代码可以参考引用中的示例。其中，通过遍历新内容newVal的每个字符，判断是否在标签中或特殊字符中，来判断是否是有效的字数。如果是有效的字数，则将fontCount加1。最后，fontCount的值就是编辑器中输入的有效字数的统计结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3使用vueup/vue-quill富文本、并限制输入字数](https://blog.csdn.net/m0_55969466/article/details/129499497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue项目富文本编辑器输入格式化以计算总字数](https://blog.csdn.net/LIMITSSS/article/details/124790971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]