当前位置：首页 > news >正文

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

news 2025/8/16 3:49:58

本文将通过具体的代码示例，详细解释如何在 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 详细解释

获取编辑器状态和选择范围
```
const state = editorView.value.state;
const selection = state.selection.main;
const currentPos = selection.head;
```
- state：获取当前编辑器的状态。
- selection：获取当前选择范围。
- currentPos：获取当前光标位置。
计算新光标位置
```
const anchor = currentPos + template.length;
const head = selection.main.head;
```
- anchor：新光标位置的起始点。
- head：新光标位置的结束点。
执行插入操作

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 详细解释

判断是否选中文本

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：设置新的选择范围。