在具有ContentEditable的页面中使用Codemirror

Question

我正在创建一个嵌入codemirror实例并在页面上有一个contenteditable部分的页面。我的动机是在codemirror编辑器中显示contentEditable部分的html代码，并且只要用户在可编辑部分内单击，代码镜像值就会更新。 我面临的问题是，只要用户在contentEditable部分中单击，就会运行更新编辑器值的代码 editor.setValue(..content value from editable..)使得contentEditable松散焦点，导致无法将数据添加到contentEditable。

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

Answer 1

您可以使用CodeMirror事件onChange将焦点重新放回contentEditable部分。 codemirror manual section events 在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的更改时获得焦点。这可以防止在代码镜像编辑器中失去对用户所做更改的关注。