最近封装了一个vue编辑器组件，发现按回车键，换行后，光标定位在开头，而不是回车的地方。

为什么要封装编辑器？

因为我要模拟word的输入，并且需要标记出来输入区域。如下图：

编辑器样式

如果使用输入框，则中括号[]标记不会随着文字走，比如内容换行的效果

换行效果

换行的时候，标记是跟着内容的。

解决方案

使用Selction和Range对象来解决。

通过Selection对象获取光标所在对象，然后通过Range对象获取光标的位置，记录回车时光标的位置，等刷新后再把光标设置回去。

关键代码如下：

      <span        ref="elInput"        class="word-text"        :placeholder="props.placeholder"        :class="[props.inputClass, { disable: props.disable }]"        :contenteditable="!props.disable"        @input="onInputValue"        @keypress.enter="onKeyPress"        @keyup.enter="onKeyup"      >        {{ props.value || "" }}      </span>

当按下回车键的时候记录光标位置，回车键结束时重新设置光标位置。

const onKeyPress = (e) => {  const el = e.target;  const val = e.target.innerText;  var selection = window.getSelection();  var range = selection!.getRangeAt(0);  // 回车键，记录光标位置  cursorIndex.value = range.startOffset;};const onKeyup = (e) => {  // 只有光标被标记了，才进行处理  if (cursorIndex.value <= 0) {    return;  }  const el = e.target;  const val = e.target.innerText;  var selection = window.getSelection();  var range = selection!.getRangeAt(0);  selection.removeAllRanges();  // 在光标移动结束后重新设置  setTimeout(() => {    // 设置光标开始位置    range.setStart(el.firstChild, Math.min(cursorIndex.value + 1, val.length));    // 添加选区    selection.addRange(range);    // 清除光标标记    cursorIndex.value = 0;  }, 0);};

上面就是解决方案，有的人我看直接在一个keyup事件中就解决了，我试了在keyup中处理不管用。