CKEditorおよびCKFinderを使用中

1年 ago

夏樹, 風

2 minutes

CKEditorとCKFinderは、リッチテキストエディタとファイル管理に利用される、二つの異なるフロントエンドツールです。以下に、これらを使用する一般的なステップを示します。

プロジェクトに CKEditorと CKFinder のスクリプトファイルをインポートします。最新のバージョンは公式サイト (https://ckeditor.com/) からダウンロード可能で、あなたのプロジェクトに追加できます。
例えば、要素、またはid=”editor”に設定された <div>要素などのコンテナ要素をページに追加して、CKEditorエディタを表示します。</li> <li>JavaScriptでCKEditorエディタを初期化するには、ClassicEditorまたはBalloonEditorなどのコンストラクタでインスタンスを作成して、ページ上で指定されたコンテナ要素に追加します。例：</li> </ol> <pre class=”post-pre”><code>ClassicEditor .create( document.getElementById( ’editor' ) ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } ); </code></pre> <ol> <li>CKFinder.setupCKEditor(config)</li> </ol> <pre class=”post-pre”><code>CKFinder.setupCKEditor( editor ); </code></pre> <ol> <li>CKFinderをバックエンドに接続する必要があります。CKFinderはファイル管理などの操作を実行するためにバックエンドサーバーと通信する必要があります。サーバー側でCKFinderのURLパスとアクセス許可を設定する必要があります。CKFinderを設定する方法の詳細については公式ドキュメントを参照してください。</li> <li>CKFinder を CKEditor に導入すれば、ファイルを挿入および管理できます。CKEditor のツールバーに「画像の挿入」ボタンが表示され、クリックすると画像の選択に使用できる CKFinder のダイアログが開きます。</li> </ol> CKEditorとCKFinderを使う簡単な例です。実際の必要性に応じて、他の設定やカスタマイズが必要になるかもしれません。機能や使い方について詳しくは公式ドキュメントやサンプルコードを確認できます。