vue实现选区插入元素

实现选区插入元素的步骤

在Vue中实现选区插入元素，需要结合DOM操作和Vue的数据绑定。以下是具体实现方法：

获取当前选区

使用window.getSelection()获取用户选择的文本范围。保存选区的起始位置和结束位置，以便后续操作。

const selection = window.getSelection();
const range = selection.getRangeAt(0);
const selectedText = range.toString();

保存选区位置

在插入元素前，需要先保存选区的位置信息。这样可以确保插入后能恢复光标位置。

const startOffset = range.startOffset;
const endOffset = range.endOffset;
const startContainer = range.startContainer;
const endContainer = range.endContainer;

创建并插入新元素

使用document.createElement()创建新元素，并通过range.insertNode()将其插入到选区中。

const newElement = document.createElement('span');
newElement.className = 'inserted-element';
newElement.textContent = '插入的内容';
range.deleteContents();
range.insertNode(newElement);

恢复选区

插入元素后，需要恢复用户之前的光标位置或选区。

const newRange = document.createRange();
newRange.setStart(startContainer, startOffset);
newRange.setEnd(endContainer, endOffset);
selection.removeAllRanges();
selection.addRange(newRange);

Vue数据绑定

如果插入的内容需要与Vue数据绑定，可以使用ref获取DOM节点，然后操作。

<template>
  <div ref="editableDiv" contenteditable @mouseup="handleSelection"></div>
</template>

<script>
export default {
  methods: {
    handleSelection() {
      const selection = window.getSelection();
      if (selection.toString().length > 0) {
        this.selectedText = selection.toString();
      }
    },
    insertElement() {
      const range = window.getSelection().getRangeAt(0);
      const newNode = document.createElement('span');
      newNode.textContent = this.insertContent;
      range.insertNode(newNode);
    }
  }
}
</script>

处理内容可编辑区域

如果需要在一个可编辑区域实现选区插入，可以使用contenteditable属性。

<div contenteditable @mouseup="handleSelection"></div>

注意事项

• 操作DOM时需注意Vue的响应式系统不会自动检测这些变化。
• 对于复杂的富文本编辑需求，建议使用专门的库如Quill或Tiptap。
• 在组件销毁时，应清理事件监听器和选区对象以避免内存泄漏。

以上方法结合了原生DOM操作和Vue的特性，能够实现在选区插入元素的功能。根据实际需求，可以进一步扩展或优化。