web-dev-qa-db-ja.com

CKEditor5インスタンスからデータを取得する方法

CKEditor 4の場合、次のようなtextareaデータを取得できることを知っています。

var content = CKEDITOR.instances['comment'].getData();

これはCKEditor5でどのように行われますか？

ckeditorckeditor5
7
user3691644

答えは 基本API ガイドにあります。

基本的に、CKEditor 5には単一のグローバルエディターリポジトリはありません（古いCKEDITOR.instancesグローバル変数のように）。つまり、作成したエディターへの参照を保持し、データを取得するときにその参照を使用する必要があります。

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.getData(); // -> '<p>Foo!</p>'
    } )
    .catch( error => {
        console.error( error );
    } );

他の機会にデータを取得する必要がある場合（エディターを初期化した直後にデータを読み取るのは誰ですか？;））、エディターへの参照をアプリケーションの状態の共有オブジェクトまたはスコープ内の変数に保存します。

let theEditor;

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        theEditor = editor; // Save for later use.
    } )
    .catch( error => {
        console.error( error );
    } );

function getDataFromTheEditor() {
    return theEditor.getData();
}

このJSFiddleを参照してください： https://jsfiddle.net/2h2rq5u2/

EDIT：複数のエディターインスタンスを管理する必要がある場合は、 CKEDITOR 5 getエディターインスタンス を参照してください。

14
Reinmar

グローバル変数を宣言してから、editor.getData（）を使用します。このようなもの：

var editor;
ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
        editor=editor;
    })
    .catch(error => {
        console.error(error);
    });

次に、イベントハンドラーで、これが機能するはずです。

editor.getData();
2
Arvind