SmartBlock - ブロックベースのReact用WYSIWYGエディタ
ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。 今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。
SmartBlockの使い方
リスト部にマウスを当てた場合です。
テキストだけの場合はツールバーの内容が変わります。
文章全体では右側に並び替えも出ます。
表の場合は列や行の追加も出ます。
SmartBlockの便利なところは、Reactのコンポーネントとして単純なHTMLテキストを適用するだけで使えることです。専用のブロックなど気にする必要はありません。色変更などはありませんが、カスタマイズして実装すればよさそうです。
SmartBlockはReact用TypeScript製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。
appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror