Easy-Markdown-Editor 中获取和操作选中文本的技术实现

在基于 Easy-Markdown-Editor 的开发过程中，我们经常需要实现文本选区操作功能。本文将深入探讨如何通过底层 CodeMirror 实例实现选区定位和文本修改。

核心实现原理

Easy-Markdown-Editor 底层集成了 CodeMirror 编辑器，这为我们提供了强大的文本操作能力。通过访问编辑器实例的 codemirror 属性，开发者可以调用完整的 CodeMirror API。

关键技术点

1. 获取当前选区内容

通过 getSelection() 方法可以直接获取当前选中的文本内容：

const selection = mde.codemirror.getSelection();

2. 选区文本替换

使用 replaceSelection() 方法可以替换当前选区内容，并自动保持选区状态：

mde.codemirror.replaceSelection(`[自定义标记]${selection}[/自定义标记]`);

3. 光标位置操作

获取当前光标位置：

const cursorPos = mde.codemirror.getCursor();

在指定位置插入文本：

mde.codemirror.replaceRange("插入内容", cursorPos);

实际应用示例

结合 React Hotkeys Hook 实现快捷键功能：

useHotkeys('ctrl+1', () => {
  if (!mde) return;
  const selection = mde.codemirror.getSelection();
  mde.codemirror.replaceSelection(`[格式化]${selection}[/格式化]`);
}, {
  preventDefault: true,
  enableOnFormTags: true,
  enableOnContentEditable: true
});

进阶技巧

1. 选区范围扩展：通过 getCursor('start') 和 getCursor('end') 可以获取选区的起始和结束位置

2. 多光标支持：CodeMirror 支持多光标操作，可以同时修改多个选区

3. 撤销历史：所有通过 API 执行的修改都会自动加入撤销历史栈

注意事项

1. 操作前务必检查编辑器实例是否已初始化
2. 复杂操作建议封装成独立函数以提高代码可维护性
3. 考虑添加防抖处理以避免高频操作导致的性能问题

通过掌握这些核心技术点，开发者可以在 Easy-Markdown-Editor 上实现各种复杂的文本编辑功能，满足个性化的编辑需求。