CKEditor 4の場合、次のようなtextareaデータを取得できることを知っています。
var content = CKEDITOR.instances['comment'].getData();
これはCKEditor5でどのように行われますか?
答えは 基本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エディターインスタンス を参照してください。
グローバル変数を宣言してから、editor.getData()を使用します。このようなもの:
var editor;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editor=editor;
})
.catch(error => {
console.error(error);
});
次に、イベントハンドラーで、これが機能するはずです。
editor.getData();