代码镜像：获取有关更改的文本 [英] Code Mirror: Get Text Around Changes

问题描述

使用代码镜像，我需要将更改事件数据映射到包含以下内容的元组列表：

Using Code Mirror, I need to map change event data to a list of tuples containing:

（更改前的文本，更改文本，更改后的文本）

我目前正在收听 change 事件，可以处理输入更改，但必须为删除，选择移动和撤消操作编写特定的解决方案。

I am currently listening on the change event and can handle input changes, but have to code specific solutions for deletions, selection movements, and undos.

是否有更可靠的方法可用于标准事件？

Is there a more reliable approach that works with the standard events?

添加当前工作。

再想一想，我只关心文档中的第一个（就位置而言）更改。这是我目前正在执行的操作：

Thinking a bit more, I only care about the first (in terms of position) change in a document. Here is what I currently do:

var docStart = {'line': 0, 'ch': 0},
    docEnd = {'line': Infinity, 'ch': Infinity};

// Just assume that we always have a single change and it is first
// for this example.
cm.on('change', function(cm, change) {        
    var start, end, text; switch (change.origin) {
    case '+delete':
        start = change.from;
        end = change.from;
        text = '';
        break;
    case 'undo':
        start = change.from;
        end = change.from;
        text = change.text.join('\n');
        break;
    case 'redo':
        start = change.from;
        end = {'line': change.to.line, 'ch': change.to.ch + 1};
        text = '';
        break;
    default:
        start = change.from;
        end = {'line': change.to.line, 'ch': change.to.ch + 1};
        text = change.text.join('\n');
        break;
    }

    var pre = cm.doc.getRange(docStart, start);
    var post = cm.doc.getRange(end, docEnd);

    [pre, text, post]; // output
};

这是不正确的，并非所有事件类型都已处理，许多情况，例如行终止符，也无法正确或持续地处理。

This is not correct. Not all event types are handled and many cases like line terminators also are not handled correctly or constantly. An alternative would be greatly appreciated.

推荐答案

要在编辑之前获取文本，可以使用 beforeChange 事件。
比获取文本要简单得多。
beforeChange 也具有不错的属性，因为每次更改都会被触发（与 change 一样，没有链接）。

To get text's before edit, you could use beforeChange event. Than the text fetching is pretty straightforward. beforeChange also has nice property, as it's fired for each change (no chaining as with change).

cm.on("beforeChange", function (cm, change) {
  var before = cm.getRange({ line: 0, ch: 0 }, change.from);
  var text = cm.getRange(change.from, change.to);
  var after = cm.getRange(change.to, { line: cm.lineCount() + 1, ch: 0 });
  console.log("before change", before, text, after);
});

如果更改后需要文本，则必须计算 to 在更改后的坐标系中。幸运的是，它仍然很容易：

If you need the text after change, than you have to calculate to in post-change coordinate system. Luckily it's quite easy still:

cm.on("change", function (cm, change) {
  var from = change.from;
  var text = change.text.join("\n");
  var removed = change.removed.join("\n");
  var to =  cm.posFromIndex(cm.indexFromPos(from) + text.length);

  var before = cm.getRange({ line: 0, ch: 0 }, from);
  var after = cm.getRange(to, { line: cm.lineCount() + 1, ch: 0 });

  console.log("after change", before, removed, text, after);
});

希望这行得通，我还没来得及测试。

Hopes this works, I hadn't time to test it properly.

这篇关于代码镜像：获取有关更改的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！