4

CKEditor 5 に自動保存機能を実装しようとしています。この機能では、変更が加えられ、エディターがフォーカスを失った後にのみ保存が行われます。

どうすればこれを行うことができますか? ドキュメントは私にとって非常に混乱しています。

これは私が得た最も近いものです:

function onChange(el,editor) {
    editor.document.once('change',function(evt,data) {
        $(el).one('blur',function() {
            saveFunction();
            onChange(el,editor);
        });
    });
}

onChange(el,editor);

私の解決策の問題は、CKEditor がモーダルを表示するたびにぼかしイベントが発生することです。

4

3 に答える 3

9

エディター UIのフォーカスされた要素を追跡するには、focusTracker (で利用可能editor.ui.focusTracker) を使用できます。現在フォーカスされているエディターのさまざまな部分を追跡します。

focusTracker.isFocusedは、エディタの登録済みコンポーネントのtrueいずれかにフォーカスがあるときはいつでもです。従来のエディター ビルドの場合、フォーカスされた要素は次のいずれかになります。

  • 編集エリア、
  • ツールバー、
  • コンテキスト ツールバー。
editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
    if ( !isFocused ) {
        // Do whatever you want with current editor data:
        console.log( editor.getData() );
    }
} );
于 2018-03-19T14:49:13.880 に答える
2

@Peter と @jodator の両方の回答に基づく完全な例を次に示します。CKEditor 5 インライン エディターを使用します。Adam Cook が質問で述べたように、ドキュメントはあまり明確ではありません。

<div id="textblock1" class="editor">
    <p>
        Lorem ipsum dolor sit amet.
    </p>
</div>

<div id="textblock2" class="editor">
    <p>
        Sed ut perspiciatis unde omnis iste natus.
    </p>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/inline/ckeditor.js"></script>

<script>
    var text_changed = false;

    InlineEditor
        .create(document.querySelector('.editor'), {
        })
        .then(editor => {
            window.editor = editor;

            detectTextChanges(editor);
            detectFocusOut(editor);
        })
        .catch(error => {
            console.error(error);
        });

    function detectFocusOut(editor) {
        editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
            if (!isFocused && text_changed) {
                text_changed = false;
                console.log(editor.getData());
            }
        });
    }

    function detectTextChanges(editor) {
        editor.model.document.on('change:data', () => {
            text_changed = true;
        });
    }
</script>
于 2020-03-23T13:12:09.837 に答える