CKEditorの設定とカスタマイズ方法

CKEditorの初期設定: CKEditorを使用する前に、いくつかの初期設定を行う必要があります。以下は、CKEditorの基本的な設定例です。

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

上記の例では、#editorというIDを持つ要素をエディタ領域として使用しています。必要に応じて、要素のIDを変更してください。

ツールバーのカスタマイズ: CKEditorでは、ツールバーをカスタマイズして必要な機能を追加したり、削除したりすることができます。以下は、ツールバーをカスタマイズする方法の一例です。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
    } )
    .catch( error => {
        console.error( error );
    } );

上記の例では、heading、bold、italic、linkのボタンのみをツールバーに表示しています。必要に応じて、ボタンの配列を変更してください。

イベントのハンドリング: CKEditorでは、さまざまなイベントをハンドリングすることができます。以下は、テキストが変更されたときにイベントをキャッチする例です。

const editor = ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .catch( error => {
        console.error( error );
    } );
editor.model.document.on( 'change:data', () => {
    const data = editor.getData();
    console.log( data );
} );

上記の例では、テキストが変更されるたびに、変更後のデータをコンソールに出力しています。必要に応じて、他のイベントをハンドリングするコードを追加してください。

これらはCKEditorの設定とカスタマイズの一部です。さまざまなオプションやプラグインがあり、さらに高度な機能を実装することもできます。公式のCKEditorドキュメントやコミュニティのサポートリソースを活用して、さらに詳細な情報を得ることをおすすめします。