0

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

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

4

1 回答 1

0

您可以使用 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 编辑器中失去对用户所做更改的关注。

于 2013-02-15T18:09:34.300 回答