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

Webブラウザ上で使えるWYSIWYGなエディタは昔からずっと存在します。にも関わらず新しいソフトウェアが年々登場しているところを見ると、自分のサイトや使い方にぴったりマッチするツールがないのかも知れません。

とにかくカスタマイズがしやすく自分たちのサイトに自由に組み込めるものが良いと考える方はwysihtmlを使ってみてはいかがでしょう。シンプルな作りでカスタマイズして自分たちのニーズに合わせたWYSIWYGエディタが手に入るでしょう。

wysihtmlの使い方

インストールはbowerを使うのが簡単そうです。

bower install wysihtml

HTMLは次のように書きます。

<!-- toolbar with suitable buttons and dialogues -->
<div id="toolbar">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">H1</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p">P</a>
</div>

<!-- element to edit -->
<div id="editor" data-placeholder="Go on, start editing..."></div>

<script>
  var editor = new wysihtml5.Editor('editor', {
    toolbar: 'toolbar',
    parserRules:  wysihtml5ParserRules
  });
</script>

そうすると次のようなWYSIWYGエディタが表示されます。

文字を書いたりリストをつけたり文字色を設定したりと機能は様々です。
文字を書いたりリストをつけたり文字色を設定したりと機能は様々です。

HTMLで取り出すこともできます。
HTMLで取り出すこともできます。

なおこのような簡易デモの他、すべての機能をまとめたものもあります。

これはかなり多機能ですね。これらすべてがwysihtmlで変更可能です(一部編集不可指定もできます)。
これはかなり多機能ですね。これらすべてがwysihtmlで変更可能です(一部編集不可指定もできます)。

テーブルのカラムや行を追加できます。
テーブルのカラムや行を追加できます。

拡張版はちょっと機能が多すぎる気もしますが、この中から自分の使いたいものを選んで配置して使うことができます。ボタンなどもあらかじめ用意されている訳ではないので自由にWeb Fontなどで装飾ができます。

wysihtmlはHTML5 Validで、iframeを使っていません(使うことも可能です)。またjQueryも使っておらず、軽量です。ブラウザはIE8以上をサポートしており、Mobile SafariやAndroidもサポートされています。

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

Wysihtml editor

Voog/wysihtml

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2