商用利用できるWYSIWYGエディター5選！Froala Editorの導入方法も解説

• 「Microsoft Officeシリーズの感覚で、HTMLの文字装飾ができればいいのに……」
• 「Wordpressのような高機能なエディターが欲しいな……」

CMSを開発するとき、このように感じるエンジニアの方は多いのではないでしょうか。

しかしWordpressのような高機能なエディターを自分で作るのには、膨大な工数がかかります。自作という選択肢はあまり現実的ではありませんよね。

そこで便利なのが、「WYSIWYG（ウィジウィグ）エディター」。OfficeのWordのようなドキュメントエディターを、簡単に導入できるフレームワークやプラグインのことです。文字の装飾はもちろん、画像や動画の設置までできる高機能なエディターを簡単に導入できます。

今回は、商用利用が可能なWYSIWYGエディターを5つピックアップしました。CakePHP3で簡単に実装できる『Froala Editor』の導入方法も解説しているので、ぜひ参考にしてみてください。

WYSIWYGエディターとは？

WYSIWYG（ウィジウィグ）エディターとは、ユーザーが編集画面で見ているものと、完成形の見た目が同じになるように作られているエディターのこと。「What You See Is What You Get（あなたが見たものを、そのまま出力できる）」という言葉の頭文字に由来します。

馴染み深いアプリケーションである『Microsoft Office Word』も、WYSIWYGエディターの一種です。

いまや誰もが無料でWebコンテンツを発信できる時代になりましたが、これらのベースはHTMLで作られています。文字の色を少し変えるのにも、画像をひとつ挿入するのにも、本来はHTMLタグの知識が必要です。

しかしWYSIWYGエディタを活用すれば、HTMLタグの知識がなくてもWebコンテンツを簡単に制作できます。使い慣れたOfficeソフトと同じ感覚で、文字の色を変えたり画像を挿入したりできるのです。

そのためHTMLコーダーでない方が利用するCMSは、WYSIWYGエディタが搭載されているものが適しています。

【商用OK】おすすめのWYSIWYGエディター5選

数あるWYSIWYGエディタから、今回はおすすめのものを5つをピックアップしてご紹介します。

1. Quill

『Quill』は商用利用可能な、JavaScript製のWYSIWYGエディターです。世界的に人気の高いライブラリで、GitHubで2万6000ものスターを獲得しています。

使い方は非常に簡単。任意のDOMに、Quillが読み込まれるようJavaScriptを記述するだけです。公式のドキュメントに詳しい方法が書かれているので、ぜひ参考にしてみてください。

QuilにはCDNが提供されており、手軽に導入できることも魅力です。コードブロックの作成と強調表示を行うことが可能で、プログラミング言語を扱うサービスに利用するのにも向いています。

またQuillは「Snow」と「Bubble」の2つの外観テーマが配信されており、場面に応じて両者を使い分けられます。

• Snow：
  テキストボックスの上部にアイコンが並んでいる、はてなブログやWordpress4以前のようなオーソドックスなツールバー形式のテーマ。
• Bubble：
  装飾したい文字を選択するとツールチップが表示される、noteやWordpress5以降（Gutenberg）のようなテーマ。

なお、Quillはツールバーの日本語化には非対応となっているので注意してください。マウスオーバーによるガイド表示などもないため、ITリテラシーに自信がある方におすすめのWYSIWYGエディタです。

Quill

2. Redactor

『Redactor』は、商用可能かつ日本語対応が可能なWYSIWYGエディターです。

jQueryに依存するライブラリではないため、jQueryを使いたくない案件にも取り入れられます。ツールバーには馴染みのあるアイコンが並んでおり、マウスオーバーするとガイドが表示される親切なUIです。

RedactorもQuillと同様に、任意のDOMを指定するだけでエディター化できます。公式ドキュメントは英語のみですが、サンプルやデモが豊富に用意されているので、英語が苦手な方でも理解しやすいでしょう。

Textexpanderやウィジェット機能など、既存のプラグインはもちろんのこと、プラグインの自作も可能です。プラグインを作る方法も公式ドキュメント書かれているので、ぜひ参考にしてみてください。

有料のライブラリ（$179〜）ですが、買い切り方式なのでどのプランも1回購入すれば半永久的に使用できます。オリジナルの機能も追加で入れたい方におすすめのWYSIWYGエディタです。

Redactor

3. CKEditor 5

CKEditor 5は商用利用可能な、JavaScript製の歴史あるWYSIWYGエディタです。Googleドキュメントに似たUIで、ReactやAngular、Vue.jsといったイマドキのフレームワークと同時に使えます。

またWordやExcel、Googleドキュメントなどのオフィス系ソフトとの互換性があるため、「原稿をWordで作ってCMSにコピペで入稿したい」というニーズに応えることも可能です。

CKEditor 5は、画像をアップロードすると、レスポンシブ対応の画像を自動生成できる機能も備えています。

「高機能すぎて使いこなすのが難しそう……」と感じてしまうかもしれませんが、CKEditor 5は日本語の解説記事が多く公開されているので、安心して使用できます。

なおCKEditor 5は、無料ライセンスでも商用利用が可能です。しかし無料ライセンスでは一部機能が使えないので注意してください

CKEditor 5

4. Editor.js

『Editor.js』は、ごくシンプルでクリーンなUIが印象的なブロックスタイルエディターです。

ブロックスタイルエディターとは、ブロック単位でコンテンツを作っていくエディタです。Wordpress最新版でデフォルト設定されている「Gutenberg」のような、”テキストのブロック”ごとに管理するWYSIWYGエディターを指します。

Editor.jsの特徴は、大きく以下の2点です。

• ブロック単位でスタイルを定義するため、コードがわかりやすい
• JSON形式で出力できるため、再利用がしやすい

最新のWordpressで取り入れられている形式なだけあり、WYSIWYGエディターのなかでもこれから主流になっていくことが期待されています。

Editor.js

5. Froala Editor

『Froala Editor』は、AmazonやAppleなどの世界的に有名な企業も採用している、JavaScript製のWYSIWYGエディターです。CakePHPやjangoといったメジャーなフレームワークに対応しています。

自動保存機能を簡単に実装できたり、メディアファイルをAmazon S3にアップロードするのをFroala単体で実現できたりと、大規模なプロジェクトや商用利用にも向いています。

公式ドキュメントがよく整備されていて、導入やカスタマイズが分かりやすいのも魅力のひとつです。こちらはもっとも安価なプランでも$239買い切りと、Redactorと比較して高額な料金設定になっています。

しかしRedactorにはないオプションが用意されているため、プロジェクトによっては必要な機能の実装に関わる開発工数を抑えられます。プロジェクトの仕様や予算をかんがみて、Froalaを導入するか別のライブラリにするかを検討して決めるのが良いでしょう。

Froala Editor

CakePHP3製CMSにFroala Editorを導入する方法

▲Froala Editor 機能紹介（出展：Froala Editor）

Froala Editorは、CakePHP3のプラグインとして用意されているため、ヘルパーを使って簡単に導入できます。

しかし現在、Froala Editorの公式ドキュメントはCakePHP3.7.0以降の文法には対応しておらず、チュートリアル通りに行うとエラーが発生してしまいます。

そこで今回は、ver3.7.0以上の文法に対応した方法を解説していきます。インストールから実装までコード付きで解説するので、3.7.0以上の環境でFroala Editorを実装したい方は、ぜひ参考にしてみてください！

インストール

まずは、composerを使ってFroala Editorをインストールします。cakePHPのプロジェクトフォルダ内で、以下のコマンドを実行してください。

php composer.phar require froala/wysiwyg-cake

すると、vendor直下に「froala」というフォルダが作成されます。

Application.phpの設定

インストールが完了したら、プラグインを読み込ませます。Application.phpに以下のコードを追記しましょう。

$this->addPlugin('Froala');

AppControllerの設定

次に、AppControllerの任意の場所に以下のコードを追記します。

public $helpers = array('Froala.Froala');

ここまで行ったら、ひとまずFroala Editorを使用するための準備は完了です。

Froala Editorの表示

ここからは、Froala Editorを実際に表示する方法を解説します。まずは、任意のTemplateファイルを開き、textareaを作成します。

<?= $this->Form->textarea('任意の名前', ['id' => '任意のID名']); ?>

次に、Froala Editorのプラグインを読み込みます。

コードを入力する際は、先ほど記述したtextareaよりも下の行にするように注意してください。

<?= $this->Froala->plugin();?>
<?= $this->Froala->editor('#任意のID名'); ?>

ここまで完了したら、ブラウザでページを読み込んでみてください。指定したtextareaに、Froala Editorのツールバーが表示されていればOKです。

▲textareaにFroala Editorが設定されている状態

日本語化の設定

実装は完了したものの、このままではヒント表示がすべて英語になってしまい、日本人にはやさしくありません。そこで以下では、言語設定を日本語に対応させる方法を解説していきます。

Froala Editorは、日本語対応させるためのファイルは既に用意されていますが、デフォルトでは読み込まれていません。

まず、vendor/froala/wysiwyg-cake/src/View/Helper/の中にある「FroalaHelper.php」を編集していきます。

以下のように書かれている部分を探してください。この箇所でヘルパーが読み込むjsファイルを指定しています。

echo $this->Html->script(array(
'/Froala/js/froala_editor.min.js',
'/Froala/js/plugins/align.min.js',

対象のコードが見つかったら、以下のコードを追記して日本語化ファイルを読み込ませます。

'/Froala/js/languages/ja.js', //日本語化ファイル追記

ここで一度Templateファイルに戻り、先ほど記述したコードに日本語化のためのパラメーターを加えます。

<?= $this->Froala->editor('#任意のID名', ['language' => 'ja']; ?>

これで設定は完了です。ブラウザから実行結果を確認してみましょう。以下のように日本語化されていればOKです。

▲日本語化されたFroala Editor

今回は日本語の言語ファイルのみを読み込ませましたが、他の言語ファイルを読み込ませたうえで、使用言語を変数指定すれば、エディターの多言語対応も可能です。

日本国内だけでなく海外の方にも分かりやすいサービスを展開するなら、ぜひ使いこなしたい機能ですね。

【おまけ】オプション紹介

Froala Editorには、さまざまなオプションが用意されています。今回はそのなかでも、とくに便利なものをご紹介します。

WYSIWYGエディターでCMSを強化しよう

ブログやSNSを、誰もが当たり前のように、しかも無料で使うようになった現代。「誰もが自由にHTMLタグを扱うことができる」WYSIWYGエディターを搭載したサービスが続々と登場しています。

もはやWYSIWYGエディターはCMSでは当たり前の存在となり、「ないのが異常」とすら言えるでしょう。

しかし高性能なエディタを自作しようとすると、システム全体を作るのと同じか、それ以上の労力を要してしまいます。したがって、CMSを強化したい場合は便利なライブラリに頼るのがおすすめです。

WYSIWYGエディターは、有料／無料問わず、高機能なライブラリが豊富に用意されています。それぞれのライブラリの特徴を把握して、どれを使っていくのか、予算や目的に合わせて選んでみてくださいね。

（執筆：fuzuki　編集：Kimura Yumi、Uchida Kazuyoshi）