Tiny MCEをContentfulに組み込んでテキストエディターをさらに強化する
ヘッドレスCMSのContentfulでは基本的には下記2種類のエディタを使い分けることになります。
- リッチテキスト
- マークダウン
Contentful的にはマークダウンを推していると思われ、ブラウザの全画面編集やテーブル挿入機能がマークダウン式エディタにのみ実装されています（リッチテキストテーブル編集も頑張って実装中とのこと。期待！）。
ただ開発者にとってマークダウンでよくても、記事を編集する非開発者にとっては、WISYWIG（見た目を弄りつつテキストを編集できる）エディが欲しい、というケースってあると思います。
ContentfulではExtensionという形で外部のJavascriptアプリを取り込めるため、デフォルトのリッチテキストエディタで機能的に足りない場合、外部エディタの導入を検討できます。
今回紹介するTinyMCEはJavascript製のリッチテキストエディタの一種で、Contetful用のライブラリを公開していますので、Contentfulデフォルトのエディタを置き換えてみようと思います。
Tiny MCEの設定
まずはTinyMCEに登録してアカウントを取得します。
無料プランでも基本的な機能は使えますが、TinyMCEは有料プラン限定のプラグインでさらにエディタの使い勝手をよくできるため、今回は有料トライアルを登録してみました。
登録が完了したら、 https://www.tiny.cloud/my-account/dashboard/ からAPIキーを取得します。
最後に、Approved Domains として contentful.tiny.cloud を加えます。
Contentful側の設定
Extension の追加
Contentfulのヘッダー[Settings]から[Extensions]をクリックし[Add extension]の[Install from Github]から進みます。
Github URLには下記のTinyMCEのリポジトリを入力します。
https://github.com/tinymce/tinymce-contentful/blob/master/extension.json
ちなみに、TinyMCEにはプランによって読み込み回数に制限があります（例: 2,500 editor loads p/m）。ただし、今回のようなリポジトリを読み込んでContentful側でエディタをホストする場合、そのクレジットは消費しないとのこと。心置きなく使えます。
その後設定画面に移ります。ほとんどの設定はそのままでOKですが、APIキーとして、さきほどのTinyMCE Cloudで取得したAPIキーを入力します。
Content Modelの追加
Content model追加ページに遷移し、[Text]タイプでフィールドを追加します。
フィールドのConfigurtionにて、[Appearance]から先ほど追加したExtension（TinyMCE）を選択します。さらにエディタの設定をしていきます。
今回はテーブル編集機能とリンク編集機能を追加したいので、
- [Plugins]の末尾にスペース区切りで
tableとlinkを追加 - [Toolbar]の末尾に「|」区切りで
tableとlinkを追加
その後[Confirm]で保存します。
エディタでテキストを書いてみる
Contentfulの記事編集画面にいくと、TinyMCEエディタに置き換わっています。
先ほど追加したテーブル編集とリンク追加ボタンもツールバーから確認できました。
ちなみにさすがTinyMCEのパッケージ、テーブルやリンクはかなり細かい設定まで可能です。
- Table: ヘッダー(th)の指定、ボーダーのスタイル、セルパディング、背景色指定、captionの付与などなど
- Link: リンクを別ウインドウで開くか否か、title属性の付与
記事投稿者側に記事レイアウトの自由を持たせて編集を行うことができます。
GraphQLで取得してみる
上記で書いた記事を、Gatsbyのフロント側からGraphQLで取得してみました。
HTMLタグがしっかり取得できています。
最後に
WordPressから移行する人でもこれで文句ないのでは？と思えるほど優秀なエディタを、簡単にContentfulに突っ込むことができました。
ちなみに今回紹介したMCEは有料プランの一番下で大丈夫ですので、Contentfulのエディタにもう少し機能が欲しい人はぜひ検討してみてください。
ClassmethodではContentfulの契約のご相談、構築支援をしています。ご興味のある方はぜひ弊社までお問い合わせください。
