我正在创建一个嵌入codemirror实例并在页面上有一个contenteditable部分的页面。我的动机是在codemirror编辑器中显示contentEditable部分的html代码,并且只要用户在可编辑部分内单击,代码镜像值就会更新。
我面临的问题是,只要用户在contentEditable部分中单击,就会运行更新编辑器值的代码
editor.setValue(..content value from editable..)
使得contentEditable松散焦点,导致无法将数据添加到contentEditable。
我究竟如何防止这种情况发生?这样用户可以直接在contentEditable部分中添加文本,并且codemirror值不断更新
答案 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的更改时获得焦点。这可以防止在代码镜像编辑器中失去对用户所做更改的关注。