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 で何かを変更するたびに、codeMirror エディターのコンテンツ全体が editor.setValue 関数を使用して置き換えられます。コンテンツ全体が置き換えられたかどうかを示し、変更が contentEditable から来た場合にのみフォーカスを戻すために、changeObj プロパティの from と to を使用できます。これにより、ユーザーが行った変更に対して codemirror エディターでフォーカスが失われるのを防ぐことができます。

于 2013-02-15T18:09:34.300 に答える