在具有ContentEditable的页面中使用Codemirror

时间:2013-02-15 05:44:07

标签: javascript jquery codemirror

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

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

1 个答案:

答案 0 :(得分:0)

您可以使用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的更改时获得焦点。这可以防止在代码镜像编辑器中失去对用户所做更改的关注。