WYSIWYGエディタを色々触ってみた

　WYSIWYGで青空文庫エディターを作れないかを考えています。ウェブでHTML出力やJSON出力のあるエディターは割とある。それを青空文庫の注記に変換すれば、入力作業がやりやすくなるかと考えて作れそうか調べてみた。

qiita.com

　editor.jsがjson形式で出力するようなので使えるかなと思ったが、一番上にメニューがあるのではなくて、文字ごと二書式を選択するタイプなので思っていたのと違った。

　quillは吐き出すjsonがあまりきれいでなかった。HTML出力しても独自な書き方てパースもしにくそうな感じがした。

JSON出力

[
{
"insert": "タイトル"
},
{
"attributes": {
"header": 1
},
"insert": "\n"
},
{
"insert": "　本文の内容\n"
},
{
"insert": {
"image": "data:image/png;base64,"
}
},
{
"insert": "\n"
}
]

HTML出力

<div class="ql-editor" contenteditable="true"><h1>タイトル</h1><p>　本文の内容</p><p><img src="data:image/png;base64,"></p></div><div class="ql-clipboard" contenteditable="true" tabindex="-1"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div>

ただ、機能を減らしたり追加したり代わりと簡単にできるのが良い。

TinyMCEはrubyタグ用のプラグインがすでにあった。ただ、フォントの指定だとか、headなどをどのように消すのかがよくわかっていない。

HTML出力は割とまともな感じがした。

cccabinet.jpn.org

CKEditor5

　ドキュメントを見ても、文章をどうやって出力するのかがよくわからなかった。

機能は豊富で、カスタマイズもしやすそうだけど。