如何实现一个可插入自定义标签的文本输入框

张开发
• 2026/4/10 1:31:05 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何实现一个可插入自定义标签的文本输入框
核心功能点击按钮插入标签 → 编辑区显示标签文字 → 转换时提取为占位符（$xxx$），也支持反向渲染。功能拆分1、字段标签配置：const fieldBtnList = ref([ { label: '字段1', value: '$field1$' }, { label: '字段2', value: '$field2$' }, { label: '字段3', value: '$field3$' }, { label: '字段4', value: '$field4$' }, ]);2、点击标签并插入文本框function setDocumentNode(field) { const tag = document.createElement('span'); tag.textContent = field.label; tag.contentEditable = 'false'; tag.style.cssText = `padding: 0 3px;color: #5E8CFF;font-weight: 650;display: inline-block;cursor: default;`; tag.dataset.value = field.value; return tag; } // 修复光标 + 连续插入 async function insertTag(field) { const editor = editorRef.value; await editor.focus(); await nextTick(); const selection = window.getSelection(); if (!selection.rangeCount) return; const range = selection.getRangeAt(0); range.deleteContents(); const tag = setDocumentNode(field); range.insertNode(tag); // 插入零宽空格保证光标正常 const space = document.createTextNode('\u200B'); range.setStartAfter(tag); range.insertNode(space); range.setStartAfter(space); range.setEndAfter(space); selection.removeAllRanges(); selection.addRange(range); cleanEmptyNodes(editor); }3、标签富文本转换为指定字符串模版：

更多文章