Keystone.jsのWYSIWYGエディターをカスタマイズする方法!

LIGブログ

2018/4/14 08:00

Keystone.jsでどんなことができるのか模索中のハルです。
今回は、Kyestone.jsのWYSIWYGエディターのカスタマイズ方法と便利なプラグインについてご紹介したいと思います。
Keystone.jsにはWYSIWYGエディターが用意されています。

こんな感じのです。
ss 2018-02-26 21.36.58

カスタマイズ方法

追記するファイルと場所

Keystone.jsのジェネレーターで作成したプロジェクトディレクトリの直下に『keystone.js』ファイルがあります。そのファイルの下記部分にjson形式で追記します。

画像の追加ボタンの追加

ss 2018-02-26 21.35.04

画像を追加できるボタンが追加されます。
画像パスややalt属性を指定できます。

ツールバーの表示

ss 2018-02-26 21.36.03

trueを指定することでツールバーを表示させることができます。

ボタンの追加

『wysiwyg additional buttons』に追加するボタン名を指定していきます。
スペース区切りで指定するとボタンが連なるように表示されます。
カンマを区切りで指定することで分けて表示することができます。
指定できるものは下記ドキュメントURLを参照してください。
https://www.tinymce.com/docs/advanced/editor-control-identifiers/
coreと記載されているものは追加プラグインを指定せずに使用できるものです。

プラグインの追加

プラグインにもよりますが、
– 『wysiwyg additional plugins』
– 『wysiwyg additional buttons』
– 『wysiwyg additional options』
に必要なものを指定していきます。

『wysiwyg additional plugins』はプラグイン名を指定します。
『wysiwyg additional buttons』はボタン追加をする場合に指定します。
『wysiwyg additional options』はプラグインでオプションの指定が必要な時に指定します。

プラグイン一覧は下記URLを参照してくだい。
https://www.tinymce.com/docs/plugins/

使えそうなプラグイン追加の機能紹介

動作確認ができて使えそうなものを紹介したいと思います。

検索と置換機能の追加

https://www.tinymce.com/docs/plugins/searchreplace/
buttons: searchreplace
plugins: searchreplace

ss 2018-02-26 21.35.17

テキスト色と背景色設定

https://www.tinymce.com/docs/plugins/textcolor/
buttons: forecolor backcolor
plugins: textcolor

ss 2018-02-26 21.35.28

テーブルボタン

https://www.tinymce.com/docs/plugins/table/
button: table
plugins: table

ss 2018-02-26 21.35.49

メディアタグ

videoタグの生成をしてくれる
https://www.tinymce.com/docs/plugins/media/
buttons: media
plugins: media

ss 2018-02-26 21.36.15

文字数カウント

https://www.tinymce.com/docs/plugins/wordcount/
plugins: wordcount

ss 2018-02-26 21.48.30

サンプルコード追加

https://www.tinymce.com/docs/plugins/codesample/
buttons: codesample
plugins: codesample
options: codesample_languages
表示時(view)にsyntaxhighlighterを使えば見た目もキレイになるかと思います。

ss 2018-02-26 21.36.24
自分が試したβ版ではWebフォントが読み込めませんでした……。

ss 2018-02-26 21.50.42
ボタンを押すとウィンドウも開いて動作はしました……。

テキストパターン

https://www.tinymce.com/docs/plugins/textpattern/
plugins: textpattern
options: textpattern_patterns
登録したパターンで記述し、改行(Enter)をすることで変換されます。登録したMarkdown記法にあわせることができます。

ss 2018-02-26 21.52.20

プラグインで追加した例

動作がうまくいかないプラグインも……。

今回はKeystone.jsのWYSIWYGエディターのカスタマイズ方法について紹介しましたが、プラグインという形でいろいろな機能が追加できて使いやすくなることがわかりました。ですが、今回紹介していないプラグインには動作がうまくいかなかったものもありました。
ほかにも、画像追加に
でCloudinaryにアップロードして画像を追加する機能があるようなのですが、現在、バグでバグを回避して対応する感じのようです。

参考:
https://github.com/keystonejs/keystone/issues/3529

Keystone.jsのアップデート後には使用できるようになるといいですね。
今後のKeystone.jsのアップデートが楽しみです。

あなたにおすすめ

ランキング

もっとよむ

注目ニュース

もっとよむ

あなたにおすすめ