记录一个需求，多行输入框 #变色输入话题，特殊符号，空格结束变色，且支持话题文字修改和删除，复制粘贴，限长500字，超出提示

js template div classbox p v-ifp classp请输入标题.../p div langzh-CN classdiv :contenteditablebox refeditor bluronBlur compositionstartonInput1(false) compositionendonInput1(true) inputonInput2(true) clickclick keyup.upgetData keyup.leftgetData keyup.rightgetData keyup.downgetData /div span classpos{{ string1.length }}/{{ textLength }}/span div classadd clickcar(#)# 添加话题/div /div /template script export default { name: RichText, data() { return { p: true, box: true, divspan: , string1: , // 内容 index: 0, // 光标位置 textLength: 500, // 文本的最大长度 list: [], // 内容中的关键词列表 kg: true, // 当前是否使用输入法输入 ischange: false, }; }, props: { value: { type:String, default: }, }, watch: { string1() { if (this.string1.length ! 0) { this.p false; } else { this.p true; } }, value: { handler: function (newValue, oldValue) { //判断赋值展示 this.$nextTick(() { const div this.$refs.editor; div.innerHTML newValue.videoName; this.onInput(true); }); }, deep: true, }, }, mounted() { this.getFocusPosition(); if (this.nameVideo?.videoName) { this.car(this.nameVideo.videoName); } }, methods: { // 使用上下左右按键在输入框中移动时需要获取光标的位置 getData(data) { this.index this.getFocusPosition(); }, // 每次点击div就重新获取一次当前光标的位置 click(a) { this.index this.getFocusPosition(); }, // 失去焦点触发传值,value是传进来的值 onBlur() { this.ischange true; this.uploadVideo.videoName this.string1; }, model() {}, // 使用delete按键删除 部分删减还没有全部实现还是出现跨标题的bug后续有空慢慢修复这个事件没啥用删除掉前面的bug就没了 handleDelete(event) { event.preventDefault(); const div this.$refs.editor; const text this.$refs.editor.innerText; const selection window.getSelection(); const selectedText selection.toString(); if (selectedText selectedText text) { div.innerHTML ; this.string1 ; this.index 0; this.onInput(true); return; } if (selectedText selectedText text) { div.innerHTML ; this.string1 ; this.index 0; this.onInput(true); return; } if (selectedText selectedText.indexOf(\n) -1) { let aa ; if ( this.index - selectedText.length this.index text.slice(this.index - selectedText.length, this.index) selectedText ) { aa text.slice(0, this.index - selectedText.length) text.slice(this.index); this.index this.index - selectedText.length; div.innerHTML aa; this.string1 this.$refs.editor.innerText; return this.onInput(true); } if ( this.index selectedText.length this.index text.slice(this.index, this.index selectedText.length) selectedText ) { aa text.slice(0, this.index) text.slice(this.index selectedText.length, text.length); div.innerHTML aa; this.string1 this.$refs.editor.innerText; return this.onInput(true); } div.innerHTML aa; this.string1 this.$refs.editor.innerText; this.onInput(true); return; } if (this.index 0) { const aa text.slice(0, this.index - 1) text.slice(this.index); div.innerHTML aa; this.string1 this.$refs.editor.innerText; this.index--; this.onInput(true); } }, //插入文本 car(zfc) { let le this.textLength - this.string1.length; if ((this.textLength this.string1.length this.string1.length 0) || le zfc.length) { this.$message({ type: error, message: 文字长度最大不超过500, }); return; } const index this.index; let arr this.string1.split(); arr.splice(index, 0, ...zfc.split()); const div this.$refs.editor; div.innerHTML arr.join(); this.index zfc.length; this.onInput(true, true); }, // 每次输入都会触发 onInput2(i) { const div this.$refs.editor; this.index this.getFocusPosition(); this.string1 this.$refs.editor.innerText; if (this.textLength this.string1.length this.string1.length 0 this.kg) { this.$message({ type: error, message: 文字长度最大不超过500, }); div.innerHTML this.string1.slice(0, this.textLength); div.blur(); } if (i this.kg) { this.onInput(i); } this.ischange true; this.uploadVideo.videoName this.string1; }, // 判断当前输入是否使用输入法 onInput1(e) { if (e) { this.kg true; if (this.textLength this.string1.length this.string1.length 0 this.kg) { const div this.$refs.editor; this.$message({ type: error, message: 文字长度最大不超过500, }); div.innerHTML this.string1.slice(0, this.textLength); div.blur(); } } else { this.kg false; } if (this.kg) { this.onInput(this.kg); } }, // 匹配关键词使用text替换e是否执行替换j暂时无用 onInput(e, j) { let text this.$refs.editor.innerText; this.string1 text; const re /#[^\s.,;?!。’、](?[\s.,;?!。’、])|#[^\s]/g; const newArr text.match(re); let matches newArr newArr.map((item) item.replace(/^#/, #)).sort((a, b) b.length - a.length); matches matches.forEach((item, i) { if (item #) { matches.splice(i, 1); } matches[i] item.slice(item.lastIndexOf(#), item.length); }); this.list matches; let div this.$refs.editor; if (matches e) { for (let i 0; i matches.length; i) { const match matches[i]; const regex new RegExp(${match}(?[\\s.,;?!。’、]|$)); text text.replace(regex, text classspan refspan$/text); div.innerHTML text; } } // 定位焦点光标 const range document.createRange(); const sel window.getSelection(); let index this.index; for (let i 0; i div.childNodes.length; i) { if (index div.childNodes[i].textContent.length) { index index - div.childNodes[i].textContent.length; } else { if (div.childNodes[i].className span) { range.setStart(div.childNodes[i].childNodes[0], index); } else { range.setStart(div.childNodes[i], index); } range.collapse(true); sel.removeAllRanges(); sel.addRange(range); return; } } }, // 获取光标位置 getFocusPosition() { const selection window.getSelection(); const range document.createRange(); selection.anchorNode range.setStart(selection.anchorNode, 0); const textNodes this.getTextNodes(this.$refs.editor); let index 0; // 遍历每一个文本节点 for (let i 0; i textNodes.length; i) { const textNode textNodes[i]; const length textNode.textContent.length; if (textNode selection.anchorNode) { index selection.anchorOffset; break; } index length; } return index; }, // 获取到每一个子节点 getTextNodes(node) { const textNodes []; if (node.nodeType Node.TEXT_NODE) { textNodes.push(node); } else { const children node.childNodes; for (let i 0; i children.length; i) { const child children[i]; textNodes.push(...this.getTextNodes(child)); } } return textNodes; }, } }; /script style .div { width: 580px; height: 115px; padding: 5px 15px; line-height: 16px; /* border: 1px #ccc transparent; */ overflow: auto; z-index: 999; border-radius: 4px; -webkit-user-modify: read-write-plaintext-only; } .div::-webkit-scrollbar { display: none; /* Chrome Safari */ } .p { position: absolute; top: 0px; left: 20px; color: #d3d1d1; z-index: -999999; } .span { color: #4f72f6; } .box { width: 600px; height: 106px; position: relative; padding-bottom: 40px; border: 1px #ccc solid; border-radius: 4px; } .pos { position: absolute; color: #ccc; bottom: 3px; right: 20px; } .colorred { color: #fe5353; } .add { width: 92px; margin-top: 25px; font-weight: 400; font-size: 14px; line-height: 24px; color: #4f72f6; background: #f0f3ff; border-radius: 4px; text-align: center; } .add:hover { background-color: #4f72f6; color: #f0f3ff; cursor: pointer; } /style