如何在Codemirror v5.65.12移动端无需CTRL键添加多光标？

官方API解决方案：使用setSelections #

CodeMirror v5提供了公开的setSelections方法，可直接设置多个选区（每个选区对应一个光标），完全不需要依赖桌面端的Ctrl键操作。

基本用法 #

如果需要添加多个光标（每个光标对应一个无选中文本的选区，即anchor和head位置相同），可以传入一个包含位置对象的数组：

// 示例：在第1行第5个字符、第3行第2个字符位置添加光标
const editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
  // 编辑器配置
});

editor.setSelections([
  { anchor: { line: 0, ch: 4 }, head: { line: 0, ch: 4 } },
  { anchor: { line: 2, ch: 1 }, head: { line: 2, ch: 1 } }
]);

结合点击事件动态追加光标 #

如果需要在移动端点击时添加新光标，可以结合点击事件获取位置，再通过listSelections获取当前已有选区，追加后更新：

editor.on("click", function(cm, event) {
  // 获取点击位置对应的编辑器坐标
  const clickPos = cm.coordsChar({ left: event.clientX, top: event.clientY });
  // 获取当前所有选区对象
  const currentSelections = cm.listSelections();
  // 追加新的光标（无选中文本的选区）
  currentSelections.push({ anchor: clickPos, head: clickPos });
  // 更新编辑器选区
  cm.setSelections(currentSelections);
});

为什么之前的尝试失败？ #

• 模拟ctrlKey的键盘事件：移动端事件模型与桌面端存在差异，CodeMirror内部对多光标触发逻辑的判断并非仅依赖ctrlKey状态，模拟事件无法正确触发内部的多光标处理流程。
• 未公开的triggerOnKeyDown：非公开API无稳定支持，且同样依赖键盘事件逻辑，无法适配移动端无实体按键的场景。

替代方案（扩展场景） #

如果需要更贴合移动端交互的操作（比如长按添加光标），可以绑定触摸事件实现：

let longPressTimer;
editor.getWrapperElement().addEventListener("touchstart", function(event) {
  longPressTimer = setTimeout(() => {
    const touch = event.touches[0];
    const clickPos = editor.coordsChar({ left: touch.clientX, top: touch.clientY });
    const currentSelections = editor.listSelections();
    currentSelections.push({ anchor: clickPos, head: clickPos });
    editor.setSelections(currentSelections);
  }, 500); // 长按500ms触发
});

editor.getWrapperElement().addEventListener("touchend", function() {
  clearTimeout(longPressTimer);
});

内容的提问来源于stack exchange，提问作者Michael Schwartz