js 小说/纯文字编辑器

本文主要是介绍js 小说/纯文字编辑器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关于js的编辑器，网上大都是富文本编辑器，如果不是经常读源代码，可能无法抽丝剥茧找到自己需要的代码。

需求

每一段文字需要添加一个p标签，方便使用css提高阅读体验。
字数统计

contenteditable

可以让元素处于可编辑状态，当前输入的内容是复制上一个元素的标签和类名。
比如

<div contenteditable><p class="pEx"></p>
</div>

回车输入后就会变成这样

<div contenteditable><p class="pEx"></p><p class="pEx">the text you typed</p>
</div>

实现

创建一个contenteditable的div标签
在dom结构渲染完成后添加<p><br></p>占位，保证下一个标签也是p标签
拦截paste事件，将富文本变成纯文字

代码

<template>
<div><div class="editbox" ref="editBox"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable@keyup.delete="handleDel"></div>{{sumWords}}
</div></template><script>
import { onMounted, ref} from 'vue'
export default {setup() {const editBox = ref(null);// 字数统计let sumWords = ref(0);//div为空时插入标签保证下一段也是p标签， br 为了占位function insertEmptyP() {editBox.value.innerHTML =`<p><br/></p>`}//删除事件function handleDel() {if (!editBox.value.innerHTML) {insertEmptyP()}countWords();}//统计字数function countWords() {let innerWordsCount = 0;let children = editBox.value.children;for(let i = 0; i < children.length; i++) {const str = children[i];const nodeType = str.firstChild.nodeType;// 判断是否是文字if( nodeType === Node.TEXT_NODE ){innerWordsCount += str.innerText.length;}}sumWords.value = innerWordsCount;}// function onCompositionEnd() {// }//初始化onMounted(() => {insertEmptyP();//中文输入完成，统计字数editBox.value.addEventListener('compositionend', countWords);editBox.value.addEventListener('change', countWords);editBox.value.addEventListener('paste', (e) => {e.preventDefault();let plainText = e.clipboardData.getData('text/plain');document.execCommand('insertText', false, plainText)countWords();})})return {editBox,handleDel,sumWords}}
}
</script><style>
* {margin: 0;padding: 0;word-break: break-word;
}
.editbox {margin: 50px auto ;width: 100%;max-width: 480px;min-height: 480px;box-shadow: 0 2px 12px rgba(0, 0, 0, .1);padding: 10px;
}
</style>