背景
WEBページの管理画面でHTMLを直接書かせたくないので、 WYSIWYGエディタを埋め込みたいと思った。
※WYSIWYGエディタの例（はてなブログの記事改廃画面）↓
javaScriptでいい感じのあるだろうと思ってググると案の定存在した。
調査比較
前提：
- 無料
- HTML＋CSS＋JSで埋め込める
三つほど見つかったので、触ってみた特徴を記載していく
一応簡単に実装もしたので、下記に配置しておく。
作成した比較サイト
ソース
gologius.github.io/test/test_WYSIWYG at master · gologius/gologius.github.io · GitHub
以下個人の感想。上記の比較サイトなども使って、自分にベストなものを選んでほしい。
trix.js
- ○ 埋め込むだけなら一番楽。 jsも書かずに済むし、input への反映も楽。すでにinputタグがあるなら、既存コードにすぐ埋め込める
- ○ undo redo ボタンがある
- × 文字サイズとか色が設定できない
- × 設定APIなどがないので、カスタマイズができない？
quill
- ○ 機能豊富。文字の色なども変えられる。画像もbase64形式で埋め込める
- ○ JSの設定変数で、表示するボタンなどを制御できる
- × カスタマイズ方法が独特。 文字サイズを任意指定できないので改造しようと思ったら、CSSの改造まで必要。
POSTでHTMLを飛ばそうとすると、下記のように少し工夫が必要になる。
詳細は上記URLの quill_test.js 参照。
var editor_input = document.getElementById(input_id); var editor_output = document.getElementById(output_id); var quill = new Quill(editor_input, baseOption); //inputにセットされている生HTMLを、変換してエディタに反映させる let initialContent = quill.clipboard.convert(editor_output.value); quill.setContents(initialContent); quill.root.innerHTML = editor_output.value; //エディタ入力時に、input に生HTMLをセットする quill.on('text-change', function(delta, oldDelta, source) { var editorHtml = editor_input.querySelector('.ql-editor').innerHTML; editor_output.value = editorHtml; });
Editor.js
- ○ 表が挿入できる
- × ブロックスタイル？と呼ばれる最新の見た目なので、使うのに慣れが必要かもしれない。通常のHTMLエディタを想定していると、現場の人に「なんじゃこれ」と言われるかも。
- × ツールバー？を固定できない
- × 行（ブロック）単位でしか、スタイル変更できない
感想
個人的なおすすめは quill。
が、ベストだとは思わない*1ので、ほかにいいのがあれば教えて。
