在具有ContentEditable的頁面中使用Codemirror

我正在創建一個頁面，該頁面嵌入一個codemirror實例並在頁面上有一個contenteditable部分。我的動機是在codemirror編輯器中顯示contentEditable部分的html代碼，並且只要用戶在可編輯部分中單擊，就會更新codemirror值。我面臨的問題是，只要用戶點擊內容可編輯部分，用於更新編輯器值的代碼就會運行 editor.setValue(..content value from editable..)，這會使contentEditable變得鬆散，這使得無法將數據添加到contentEditable。在具有ContentEditable的頁面中使用Codemirror

我到底該如何預防？因此，用戶可以直接在contentEditable部分添加文本，並且codemirror值不斷更新

來源

2013-02-15 Kshitiz Shankar

可以使用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     
       } 
     });

如果我理解你corectly，每次用戶改變CONTENTEDITABLE東西，整個codeMirror編輯內容是使用editor.setValue功能所取代。您可以使用changeObj屬性 - from和to，以指示整個內容是否已被替換，並且只有當來自contentEditable的更改發生時纔會重新獲得焦點。這可以防止在用戶所做的更改中丟失codemirror編輯器中的焦點。

來源

2013-02-15 18:09:34

嘿謝謝...這是一個內部問題，其實是在我的代碼.. setValue觸發onChange事件的CodeMirror，所以我創建了一個標誌，以防止這種onChange事件在我的代碼中有一些額外的功能，不能更換 – 2013-02-17 01:06:26

在具有ContentEditable的頁面中使用Codemirror

回答

相關問題