WYSIWYGエディタは見たままに編集できるというのが売りです。とはいえ、管理画面などで提供されるものはHTMLタグの入力を省略できるだけで、表示されている内容がそのままユーザ向けに表示される訳ではありません。 今回はまさに見たままにユーザにも提供できるコンテンツを編集可能なContentToolsを紹介します。

ContentToolsの使い方

ContentToolsを使ったデモページです。左上にあるボタンを押すと編集モードになります。

編集モードです。フローティングでメニューバーが表示されます。

日本語も問題ありません。

テーブルの追加。フローティングで設定します。

動画。YouTubeかVimeoのURLを設定します。

画像の追加。ドラッグ&ドロップで設定できます。

ContentToolsはユーザが見ている画面をそのまま編集できるようになっています。ContentTools自体はJavaScriptなので、その後の保存については別途実装する必要があるでしょう。ContentToolsはAPIが多数あり、拡張性にも優れています。

ContentToolsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

A small & beautiful WYSIWYG editor for HTML content · ContentTools GetmeUK/ContentTools