检测代码镜像编辑器的焦点

Question

我正在创建的 Web 应用程序中使用 codemirror，页面上有多个编辑器。还有撤消和重做按钮，它们确实有效。但是，我只能将一个编辑器设置为撤消，除非我使用 if 语句来确定哪个编辑器被聚焦，然后将撤消或重做功能应用于其相应的文本框。我在 jQuery 和 JavaScript 中尝试了一些变体，但无济于事。这是我试图开始工作的代码块之一。保存 codemirror 设置的实际变量称为 "codeeditor1"，“#editor1”是文本框的 ID。

if ($("#editor1").is(':focus')) {
  undo.addEventListener('click', function() {
      codeeditor1.undo();
  }, false);
  redo.addEventListener('click', function() {
      codeeditor1.redo();
  }, false);
}

我也根据方法"cm.hasFocus()" = boolean.

的文档尝试了这个

if (codeeditor1.hasFocus() == true) {
    undo.addEventListener('click', function() {
        codeeditor1.undo();
    }, false);
    redo.addEventListener('click', function() {
        codeeditor1.redo();
    }, false);
}

为了逻辑代码放置，我现在也尝试过这个，但仍然没有成功。可能是codemirror方法的bug？

undo.addEventListener('click', function() {
    if (codeeditor1.hasFocus() == true) {
        codeeditor1.undo();
    }
}, false);

redo.addEventListener('click', function() {
    if (codeeditor1.hasFocus() == true) {
        codeeditor1.redo();
    }
}, false);

Answer 1

尝试

  if( editor.hasFocus() == true  ) 
      // This editor is Codemirror object 
      // not jquery element.
  }

Answer 2

好的！所以，我想通了。

问题是（我没有正确思考）当用户按下按钮时，焦点当然会被移除，然后它会尝试测试它，这意味着 "hasFocus" 的结果当然是错误的.所以为了解决这个问题，我创建了一个变量。当其中一位编辑器关注 1、2 或 3 时，变量会更新。然后我单击按钮检查变量的值是什么，然后 re-apply 焦点到相应的编辑器之前运行在现在的 in-focus 编辑器上撤消或重做。

var detectfocus = "0";

codeeditor1.on('focus', function() {
    detectfocus = "1";
});
codeeditor2.on('focus', function() {
    detectfocus = "2";
});
codeeditor3.on('focus', function() {
    detectfocus = "3";
});


undo.addEventListener('click', function() {
    if (detectfocus === "1") {
        codeeditor1.focus();
        codeeditor1.undo();
    } else if (detectfocus === "2") {
        codeeditor2.focus();
        codeeditor2.undo();
    } else if (detectfocus === "3") {
        codeeditor3.focus();
        codeeditor3.undo();
    }
}, false);

redo.addEventListener('click', function() {
    if (detectfocus === "1") {
        codeeditor1.focus();
        codeeditor1.redo();
    } else if (detectfocus === "2") {
        codeeditor2.focus();
        codeeditor2.redo();
    } else if (detectfocus === "3") {
        codeeditor3.focus();
        codeeditor3.redo();
    }
}, false);

检测代码镜像编辑器的焦点

Detect focus of codemirror editor

html

javascript

css

jquery

codemirror