使用 CodeMirror 6 实现插入文本及替换选中文本功能

本文将通过具体的代码示例，详细解释如何在 Vue3 中使用 CodeMirror 6 实现文本插入功能，包括在光标位置插入文本和选中文本插入文本的代码示例，以及这两种插入方式的区别。

1. 只能在光标位置插入文本

1.1 代码示例

const insertTemplate = (template) => {try {if (!editorView.value) return;const state = editorView.value.state;const selection = state.selection.main;const currentPos = selection.head;const anchor = currentPos + template.length;const head = selection.main.head;console.log('当前光标位置:', currentPos);editorView.value.dispatch({changes: {from: currentPos,to: currentPos,insert: template},selection: EditorSelection.range(anchor, head),scrollIntoView: true});editorView.value.focus();} catch (e) {console.error('插入失败:', e);}
};

1.2 详细解释

1. 获取编辑器状态和选择范围

   const state = editorView.value.state;
   const selection = state.selection.main;
   const currentPos = selection.head;

   • state：获取当前编辑器的状态。

   • selection：获取当前选择范围。

   • currentPos：获取当前光标位置。

2. 计算新光标位置

   const anchor = currentPos + template.length;
   const head = selection.main.head;

   • anchor：新光标位置的起始点。

   • head：新光标位置的结束点。

3. 执行插入操作

editorView.value.dispatch({changes: {from: currentPos,to: currentPos,insert: template},selection: EditorSelection.range(anchor, head),scrollIntoView: true
});

• changes：定义插入操作的范围和内容，from和to要特别注意，要不报错。

• selection：设置新的选择范围。

• scrollIntoView：确保插入位置滚动到可见区域。

遇见这样的错误，很大概率是from和to搞错了。

更新编辑器

editorView.value.focus();

2. 可以根据用户是否选中文本，在选中文本位置替换插入文本

2.1 代码示例

const insertTemplate = (template) => {try {if (!editorView.value) return;const state = editorView.value.state;const selection = state.selection.main;if (selection.empty) {const from = selection.main.from;const to = selection.main.to;editorView.value.dispatch({changes: {from: from,to: to,insert: template},selection: EditorSelection.range(from + template.length, selection.main.from)});} else {const posFrom = selection.main.from;const anchor = posFrom + template.length;editorView.value.dispatch({changes: {from: posFrom,to: posFrom,insert: template},selection: EditorSelection.range(anchor, selection.main.from)});}editorView.value.focus();} catch (e) {console.error('插入失败:', e);}
};

2.2 详细解释

1. 判断是否选中文本

   if (selection.empty) {// 选中文本为空
   } else {// 选中文本不为空
   }

selection.empty：查询codemirror6的文档，可以知道该属性可以用来判断from和to是否相同，进而判断当前选择范围是否为空。

• 处理选中文本为空的情况

  const from = selection.main.from;
  const to = selection.main.to;editorView.value.dispatch({changes: {from: from,to: to,insert: template},selection: EditorSelection.range(from + template.length, selection.main.from)
  });

  • from 和 to：获取当前选择范围的起始和结束位置，此时from和to不同。

  • changes：定义插入操作的范围和内容。

  • selection：设置新的选择范围。

• 处理选中文本不为空的情况

  const posFrom = selection.main.from;
  const anchor = posFrom + template.length;editorView.value.dispatch({changes: {from: posFrom,to: posFrom,insert: template},selection: EditorSelection.range(anchor, selection.main.from)
  });

  • posFrom：获取当前选择范围的起始位置，from和to相同。

  • anchor：计算新光标位置的起始点。

  • changes：定义插入操作的范围和内容。

  • selection：设置新的选择范围。

3. 两种插入方式的区别

3.1 在光标位置插入文本

• 适用场景：用户希望在当前光标位置插入文本，而不影响其他内容。

• 实现方式：在当前光标位置插入文本，并更新光标位置。

3.2 在选中文本位置插入文本

• 适用场景：用户希望在选中的文本范围内插入文本，可能替换选中的文本。

• 实现方式：在选中的文本范围内插入文本，并更新选择范围。

4. 常见问题及解决方案

4.1 插入失败：RangeError: Invalid change range

问题描述：在插入文本时，可能会遇到 RangeError: Invalid change range 错误。

解决方案：

• 确保 from 和 to 的值正确，且 from 小于等于 to。

• 确保插入的文本范围在文档范围内。

4.2 光标位置不正确

问题描述：编辑器组件的值来自父组件的传值，在初始化父组件传值之后，每次插入文本都会在刚开始的第一行插入，无论怎么选中光标也不行，后来感觉光标位置可能不正确。原因就是在父组件传值之后，光标位置并没有更新，所以每次插入还是从0开始。

解决方案：

确保在父组件传值之后，在 EditorView.value.dispatch 方法中正确设置 selection，设置正确的光标位置。

4.3 如何监听光标位置，判断是否是光标位置错误的问题

问题描述：如何监听光标位置，并在控制台输出，以此判断是否是光标位置错误的问题

解决方案：

在 state的插件中使用一个函数输出光标起始位置。

4.4 怎么判断自己写的事务是不是有效的

问题描述：在代码调试时，我一度怀疑是自己的事务使用错了，导致无法成功。

解决方案：

可以简单使用下面的函数判断一下事务是不是有效的。

5. 总结

通过以上代码示例和详细解释，我们可以在 Vue3 中成功使用 CodeMirror 6 实现文本插入功能。希望本文能够帮助大家更好地理解和使用 CodeMirror 6，有什么问题欢迎大家在评论区一起交流。