如何使用contenteditable实现富文本输入框支持插入变量

文
章
目
录

• 一、需求的由来
• 实现效果
• 二、技术实现过程
• （一）用contenteditable实现富文本编辑
• （二）光标选区保存与恢复
• （三）变量元素DOM设计
• （四）双向数据绑定
• （五）配置式参数传递
• 三、总结

最近遇到个挺有意思的开发需求，今天来给大伙说说。在开发短信模板编辑器的时候，得实现一个变量插入功能，也就是在输入框里能插入变量，而且还得是富文本输入框，支持各种格式的编辑。这听起来有点复杂，不过咱们一步步拆解，其实也没那么难。

一、需求的由来

那天我正捣鼓一个日期选择器的bug呢，公司新来的前端小妹林小夕找我帮忙，说有个需求搞不定。我一看，是在短信模板编辑器里实现变量插入功能。嘿，这可太熟悉了，我刚入行那会，也被这需求折磨得够呛。想着这需求虽然看着简单，但里面弯弯绕绕还挺多的，就跟小夕说，咱们试试用contenteditable这个方案来实现吧。

实现效果

二、技术实现过程

（一）用contenteditable实现富文本编辑

这个需求的关键就是得有个能编辑的输入框，既能输入普通文本，还得能插入不可编辑的元素。但Vue 3本身没有直接绑定contenteditable的机制，所以得手动监听@input事件，再解析innerHTML，才能实现富文本编辑。

咱们先在模板里定义好这个输入框：

<div 
    ref=\"editorRef\" 
    class=\"content flex-1\" 
    contenteditable 
    @input=\"handleInput\" 
    @paste=\"handlePaste\" 
    @blur=\"saveSelection\"
></div>

这里给div加上了contenteditable属性，让它变成可编辑的。同时监听了input、paste和blur这几个事件，每个事件都有不同的作用。

接着看看处理输入事件的代码：

// 更新字符统计
const updateCharCount = () => {
  const text = editorRef.value?.textContent || \'\';
  currentCharCount.value = text.length;
};

// 发送更新事件
const emitUpdate = () => {
  const content = editorRef.value?.textContent?.replace(/\\n/g, \'\') || \'\';
  emit(\"update:modelValue\", content);
};

// 处理输入事件
const handleInput = () => {
  updateCharCount();
  emitUpdate();
};

在handleInput方法里，调用了updateCharCount函数更新输入框的字数统计，再通过emitUpdate把输入框的文本内容传递给父组件保存起来。

还有处理粘贴事件的代码也很重要，因为普通的粘贴可能会带来格式问题，甚至有XSS攻击的风险：

const handlePaste = (event: { preventDefault: () => void; clipboardData: any; }) => {
  // 阻止默认行为，即不允许粘贴任何格式的内容
  event.preventDefault();
  // 获取剪贴板数据
  const text = event.clipboardData?.getData(\"text/plain\") || \"\";
  // 使用document.execCommand(\'insertText\', false, text)插入纯文本
  document.execCommand(\"insertText\", false, text);
};

在handlePaste方法里，先阻止了默认的粘贴行为，然后获取剪贴板里的纯文本内容，再用document.execCommand把纯文本插入到输入框里，这样就能保证插入的内容安全又规范。

（二）光标选区保存与恢复

小夕在测试的时候发现，每次点击插入按钮，变量老是出现在输入框末尾，这可不行。这时候就得靠Range和Selection这两个“神器”来解决问题了。

为了能把变量准确插入到用户想要的位置，得先保存当前的光标位置，也就是选区Range对象，等插入完变量再恢复它。

先看看保存光标的代码：

const saveCaretPosition = () => {
  const selection = window.getSelection();
  if (!selection?.rangeCount) return;
  lastSelection = selection.getRangeAt(0).cloneRange();
  editorRef.value?.focus();
};

在saveCaretPosition函数里，通过window.getSelection获取当前的选区，如果有选区，就克隆一份保存起来，方便后续恢复。

再看看插入变量的代码：

const insertVariable = (varName: string) => {
  if (!varName) return;

  editorRef.value?.focus();
  const selection = window.getSelection();

  if (lastSelection && editorRef.value?.contains(lastSelection.startContainer)) {
    selection!.removeAllRanges();
    selection!.addRange(lastSelection);
  }

  const varElement = createVarElement(varName);
  const range = selection!.getRangeAt(0);
  range.insertNode(varElement);

  requestAnimationFrame(() => {
    const newRange = document.createRange();
    newRange.setStartAfter(varElement);
    newRange.collapse(true);
    selection!.removeAllRanges();
    selection!.addRange(newRange);
    saveCaretPosition();
  });
};

在insertVariable函数里，先判断变量名是否存在，存在的话就获取选区。如果之前保存过选区，就先把当前选区清空，再恢复之前保存的选区，然后创建变量元素插入到选区里。插入完之后，还得重新设置选区，把光标定位到变量后面，最后再保存一下新的光标位置。

还有在输入框失焦的时候，也得保存选区状态，防止下次插入变量时光标位置不对：

// 常规光标位置保存（用于blur事件）
const saveSelection = () => {
  const selection = window.getSelection();
  if (selection?.rangeCount) {
    const range = selection.getRangeAt(0);
    if (editorRef.value?.contains(range.commonAncestorContainer)) {
      lastSelection = range.cloneRange();
    }
  }
};

（三）变量元素DOM设计

为了让变量不能被编辑，还能整体删除，咱们创建一个span标签，把变量包起来，然后设置contentEditable=false。

const createVarElement = (varName: string) => {
  const span = document.createElement(\"span\");
  span.className = \"variable\";
  span.contentEditable = \"false\";
  span.dataset.var = varName;
  span.textContent = `${${varName}}`;
  return span;
};

在这个createVarElement函数里，创建了一个span标签，给它加上了variable类名，设置不可编辑，还在dataset里存了变量名，最后把变量的显示内容设置好。

光有标签还不够，还得在CSS里给变量设置个独特的样式，和普通文本区分开：

.variable {
  background-color: #f0f2f5;
  border-radius: 3px;
  padding: 0 4px;
  color: #409eff;
  display: inline-block;
}

这样，用户在编辑的时候就能很清楚地知道哪些是变量，哪些是普通文本了。

（四）双向数据绑定

在Vue组件里，为了能正确存储和展示变量，咱们得在组件挂载的时候解析modelValue，把变量转换成span元素。

const initHtml = (value: string) => {
  return value.replace(/${(\\w+)}/g, (_, varName) => {
    return createVarElement(varName).outerHTML;
  });
};

onMounted(() => {
  editorRef.value!.innerHTML = initHtml(props.modelValue);
  updateCharCount();
});

在initHtml函数里，用正则表达式把字符串里的变量替换成对应的span元素。在onMounted钩子函数里，把解析后的内容设置到输入框里，再更新一下字数统计。

除了初始化，还得监听modelValue的变化，保证输入框内容和外部数据始终一致：

watch(() => props.modelValue, (newVal) => {
  const parsedHTML = initHtml(newVal);
  if (parsedHTML !== editorRef.value?.innerHTML) {
    editorRef.value!.innerHTML = parsedHTML;
    updateCharCount();
  }
});

在这个watch函数里，只要modelValue有变化，就重新解析内容，如果和输入框当前的innerHTML不一样，就更新输入框内容，同时更新字数统计。

（五）配置式参数传递

为了让这个组件用起来更灵活，咱们定义了一个variableList，用来配置变量选项，用户可以根据自己的需求自由设置。

const props = defineProps({
  variableList: {
    type: Array<{ label: string; value: string }>,
    default: () => [],
  },
});

这样，在使用这个组件的时候，只需要传递不同的variableList，就能轻松切换变量选项了。

三、总结

折腾了这么一大圈，这个短信模板编辑器的富文本输入框功能总算是实现了。这里面用到的几个技术点还挺关键的：

• 利用contenteditable实现富文本编辑：借助这个属性，再配合一些事件监听，咱们就打造出了一个比传统textarea功能更强大的富文本输入框，能满足各种编辑需求。
• 光标选区保存与恢复机制：靠Range和Selection对象，成功解决了变量插入位置不对的问题，大大提升了用户体验，编辑起来更顺手。
• 变量元素DOM设计：用不可编辑的span标签封装变量，再加上独特的CSS样式，让变量在编辑过程中既不会被误改，又能方便地整体删除。
• 双向数据绑定实现内容同步：通过Vue的响应式机制，不管是初始化还是数据更新，输入框内容和外部数据都能保持一致，后续处理和存储数据也更方便。
• 配置式参数传递实现组件灵活集成：把变量列表这些配置参数通过Props传递，组件复用性大大提高，以后遇到类似需求，稍微改改配置就能用，开发效率杠杠的！

大伙要是在开发中也遇到类似需求，不妨参考参考这篇文章，希望能帮到你们！