javascript - 在带有 ContentEditable 的页面中使用 Codemirror

Question

我正在创建一个嵌入 codemirror 实例并在页面上有一个 contenteditable 部分的页面。我的动机是在 codemirror 编辑器中显示 contentEditable 部分的 html 代码，并且每当用户在可编辑部分内单击时，codemirror 值都会更新。我面临的问题是，一旦用户在 contentEditable 部分内单击，更新编辑器值的代码就会运行 editor.setValue(..content value from editable..)，这会使 contentEditable 失去焦点，从而无法将数据添加到 contentEditable。

我该如何防止这种情况？这样用户就可以直接在 contentEditable 部分中添加文本，并且 codemirror 值会不断更新

Answer 1

您可以使用 CodeMirror 事件 onChange 将焦点返回到 contentEditable 部分。 codemirror 手动部分事件 在 codemirror 编辑器中发生任何更改后都会触发此事件。

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true, 
                matchBrackets: true,  
                onChange: function(instance, changeObj) {
                    //  loose focus here                 
                }  
        });

如果我正确理解您，每次用户更改 contentEditable 中的某些内容时，都会使用 editor.setValue 函数替换整个 codeMirror 编辑器内容。您可以使用 changeObj 属性 - from 和 to，以指示是否替换了整个内容并仅在更改来自 contentEditable 时才重新获得焦点。这可以防止在 codemirror 编辑器中失去对用户所做更改的关注。