ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。 今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。

SmartBlockの使い方

リスト部にマウスを当てた場合です。

テキストだけの場合はツールバーの内容が変わります。

文章全体では右側に並び替えも出ます。

表の場合は列や行の追加も出ます。

SmartBlockの便利なところは、Reactのコンポーネントとして単純なHTMLテキストを適用するだけで使えることです。専用のブロックなど気にする必要はありません。色変更などはありませんが、カスタマイズして実装すればよさそうです。

SmartBlockはReact用TypeScript製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror