まず最初に、CKEditorをnpmを使用してインストールする方法について説明します。以下のコマンドを使用して、プロジェクトのディレクトリでCKEditorをインストールできます。
npm install @ckeditor/ckeditor5-build-classicこのコマンドを実行すると、CKEditorのクラシックビルドがプロジェクトに追加されます。必要に応じて、他のビルドタイプを選択することもできます。
CKEditorがインストールされたら、次にCKEditorを使用するための基本的なコード例を示します。以下のようなHTMLコードを使用して、CKEditorを初期化できます。
<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>上記のコードでは、CKEditorのクラシックビルドのスクリプトファイルを読み込み、<textarea> 要素をエディタに変換しています。エディタの初期化中にエラーが発生した場合は、コンソールにエラーメッセージが表示されます。
-
エディタが表示されない場合:
- HTMLコードとスクリプトのパスが正しいか確認してください。
- 必要なCKEditorの依存関係が正しくインストールされているか確認してください。
-
エディタが正しく動作しない場合:
- ブラウザのデベロッパーツールを使用して、コンソールに表示されたエラーメッセージを確認してください。エラーメッセージは、問題の特定に役立つ情報を提供することがあります。
- CKEditorのバージョンとブラウザの互換性を確認してください。一部のバージョンでは、特定のブラウザでの動作が制限される場合があります。
-
エディタのカスタマイズ:
- CKEditorのドキュメントを参照して、さまざまなカスタマイズオプションやプラグインの使用方法を学んでください。CKEditorには、幅広いカスタマイズ機能が提供されています。