Strapiに強力なリッチテキストエディタ「CKEditor」を導入するには?プラグイン導入だけでOK!

Strapi

ヘッドレスCMS Strapiのエディタを人気のWYSIWYGエディタ「CKEditor」に変更し、使いやすくする方法を紹介します。Strapiはデフォルトのエディタが貧弱ですが、プラグインの導入だけでWordPressと同じレベルのエディタを実装することができます。

スポンサーリンク

Strapiのエディタが使いにくいけど・・・

StrapiにはデフォルトでWISYWIGエディタが搭載されています。

コンテンツタイプをRich Textにすると使用できるのですが、正直とても使いにくいです。

マークダウンエディタということもあり、文字サイズ一つ変えることができません。ちょっとしたお知らせやメモ程度のブログなどであればどうにか対応できるかもしれませんが、一般的な情報サイトのバックエンドとして使うには機能が弱すぎます。

スポンサーリンク

Strapiのエディタはプラグインでかんたんに拡張できます!

しかし、大丈夫です!
Strapiのエディタはプラグインを導入することでかんたんに変更することができます。

strapi-plugin-ckeditor5をインストールしてみたときのエディタ。これならWordPressと同じように使えますね♪

以前は少なかったStrapiのプラグインですが、最近はヘッドレスCMSの広がりとともにプラグインも数多く登場してきています。エディタに関しても多くのプラグインがリリースされており、WordPressで採用されているブロックエディタ「Editor.js」や今回導入する「CKEditor」など、主要なWYSIWYGエディタの多くがStrapiのプラグインとしてリリースされています。Strapiにこれらのプラグインをインストールするだけで、高機能なエディタをかんたんに導入することができます。

とくにCKEditorはGitHubのスター数5000を超える人気のWYSIWYGエディタで、その使いやすさは折り紙付きです。WordPress用のプラグインも公開されているため、使ったことのある方もいるのではないでしょうか。

当記事では、人気WYSIWYGエディタ「CKEditor」をStrapiにインストールし、投稿ページで使えるようにしてみたいと思います。

プラグインのインストール

それではCKEditor(strapi-plugin-ckeditor5)を導入していきましょう。

strapi-plugin-ckeditor5
Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5. Latest version: 2.1.1-rc.1, last published: 2 y...

Strapiのプラグインはnpmコマンドでインストールできます。

まずコンソールを起動し、Strapiのディレクトリに移動します。

cd strapi

CKEditorはStrapi3系と4系で対応するパッケージのバージョンが異なります。あらかじめStrapiのバージョンを確認しておきましょう。

cat package.json

strapi-plugin-ckeditor5をインストールします。Strapi4系の方はそのままインストールできます。

npm i strapi-plugin-ckeditor5

Strapi3系の方はバージョンを指定してインストールしましょう。

npm i strapi-plugin-ckeditor5@1.14.0

インストールできたら、フロントエンドをリビルドします。

npm run strapi build

Strapiの管理ページ(フロントエンド)は内部のジェネレーターで生成され、キャッシュされています。リビルドを行わないと、以前生成されたキャッシュが表示されてしまい、プラグインが管理ページに反映されません。必ず行いましょう。

これでOK。設定ファイルの編集などは一切不要です。

CKEditorを使ってみよう!

ビルドが完了したら、いつも通りStrapiを起動します。

npm run strapi start

投稿ページを開いてみると、

エディタがリッチになってくれました!

これならWordPressのようにバリバリ使っていけそうですね♪

まとめ

いかがでしたか?Strapiでもプラグインを導入すれば、しっかりしたエディタを使用することができます。

CKEditorのほか、ブロックエディタのEditor.jsなどもStrapi版がリリースされています。まだまだバリエーションは十分とはいえないですが、Strapi公式のプラグインサイトもリリースされており、今後は増えていくことが予想されますので、乞うご期待です。

Strapi Market: the official plugin marketplace is live
Find all the available Strapi plugins on the marketplace. Extend Strapi and integrate it with other tools. Submit your w...

コメント

タイトルとURLをコピーしました