[Gem]Ckeditor最新版におけるplugin拡張をRails6で利用する方法

こんにちは、ウェブ系ウシジマくんです。

Railsでテキスト編集する際に便利なGem、Ckeditorを利用する際にversion5からCDN経由で各種ファイルを読み込むように大きな変更がありました。

Ckeditor changelog<<Ckeditor 5.0.0>>

ckeditorのバージョン4系から最新版にアップグレードする際にハマったため、解決方法を記事化することにしました。

https://cdn.ckeditor.com/

https://ckeditor.com/ckeditor-4/download/

https://cdn.ckeditor.com/4.17.1/full/plugins/

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_plugins.html

動作環境

今回対応した各種環境は以下です。

[Rails]
Rails 6.1.4.4
[Ruby]
ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-darwin19]
[ckeditor]
ckeditor (5.1.1)

ソースコードダウンロード手順

まずはCkeditorのサイトでzipファイルをダウンロードします。

https://ckeditor.com/cke4/builder

Choose presetから、最適なものを選択しましょう。「とりあえず全部乗せで！」という人は、「full」を選んでおけばOKです。

Select your plugins and skinでは、追加したいpluginを左側にリストアップされるように追加していきましょう。

Available skinsでは、ツールチップ表示のスタイルを変更できます。個人的には「Moono-Lisa」が一番見慣れたスタイルです。

Finalize and downloadでは、言語を選択します。ここではJapaneseを選択しましょう。なお、Englishは仕様上削除できないようです。

一通り設定を見直して、問題がなければ利用規約に同意(チェックボックスにチェックを入れるように)してSource (Big N’Slow)を選択し、ダウンロードボタンを押します。

Railsに適用する

ソースコードをダウンロードしたら、Railsに適用しましょう。まずはckeditorのバージョンを最新版にします。

# Gemfile
gem 'ckeditor'

Gemfileにはバージョン指定をせずに記述した上で、

bundle update ckeditr

上記のコマンドを実行します。

その後、既にckeditorを導入済みの環境なら、初期セットアップは終わっているはずなので、app/assets/javascripts/ckeditor/config.jsを編集します。

/**
 * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function (config) {
    config.language = 'ja';
};

// 下記のように追加したいpluginの参照方法を記述する
CKEDITOR.plugins.addExternal( 'youtube', '/ckeditor/plugins/youtube/', 'plugin.js' );

config.jsを編集したら、ソースコードからダウンロードしたファイルから、pluginsディレクトリ内にある利用したいpluginのソースコードを、Railsアプリケーションのpublickディレクトリにコピペします。

私はpublicディレクトリにckeditor/pluginsディレクトリを作成し、ソースコードからコピペしました。

また、ckeditor旧バージョンでrequireしていたckeditor/initはバージョン5以降は読み込めずにエラーとなりますのでその場合は当該箇所を削除するようにしましょう。

あとは動作確認して、問題ないことを確認しましょう。

最後に

というわけで今回は「Ckeditor最新版におけるplugin拡張をRails6で利用する方法」について書きました。

この記事がどなたかのお役に立てれば幸いです。