ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web上でHTMLコンテンツを編集する際にWYSIWYGなエディタがよく使われますが、多機能である分読み込むファイルサイズが大きくなったり、動作が重くなってしまったりします。そのほとんどの場合において使いたい機能はそこまで多くないはずです。

そこで紹介したいのがTrumbowygです。HTML5に対応した、軽量なWYSIWYGエディタです。

Trumbowygの使い方

こちらがデモです。すっきりとしたデザインですね。
こちらがデモです。すっきりとしたデザインですね。

メニューアイコンをクリックするとさらにサブメニューも表示できます。
メニューアイコンをクリックするとさらにサブメニューも表示できます。

リンクを追加する画面です。
リンクを追加する画面です。

画像もURLを指定する形式です。
画像もURLを指定する形式です。

リスト。日本語も使えます。
リスト。日本語も使えます。

Trumbowygの特徴はIE8以上に対応し、HTML5に最適化されています。さらに高速で軽量(15KB)です。オプションも多く、カスタマイズした利用が容易になっています。jQueryプラグインなので使うのは簡単です。例えば以下のように記述します。

$('#trumbowyg-demo').trumbowyg({
    fullscreenable: false,
    closable: true,
    btns: ['bold', 'italic', '|', 'insertImage']
});

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

Trumbowyg : a lightweight WYSIWYG editor

Alex-D/Trumbowyg

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2