MaterialNote - マテリアルデザインのWYSIWYGエディタ // MOONGIFT Archived

WYSIWYGなエディタはたくさんあります。昔はリッチで機能が多いものが良いとされてきましたが、最近ではなるべくシンプルによく使われる機能だけを提供するというものが増えています。今回紹介するのはMaterialNote、デザイン性の優れたWYSIWYGエディタです。

MaterialNoteの使い方

これがMaterialNoteの画面です。ツールバーが黒一色でスタイリッシュです。

テーブルを追加する場合、枠を選択します。

追加されるテーブルもすっきりしたデザインです。

行間を調整と言ったこともできます。

画像はローカルから指定もできます。

Air Modeというのにするとテキストエリアやツールバーはなくなります。文字を選択するとフローティングでツールバーが出ます。

生成されるコードです。独自のクラスはついていますが、全体的にシンプルだと思います。

編集範囲が上下に稼働できます。大量の文字の場合は広くできるのが良いです。ツールバーは常に上部に張り付いています。

MaterialNoteのベースはSummernoteで、マテリアルなデザインを適用したソフトウェアになっています。なのでデザインはBootstrapがベースとなっています。

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