Webブラウザ上で使えるWYSIWYGなエディタは昔からずっと存在します。にも関わらず新しいソフトウェアが年々登場しているところを見ると、自分のサイトや使い方にぴったりマッチするツールがないのかも知れません。
とにかくカスタマイズがしやすく自分たちのサイトに自由に組み込めるものが良いと考える方はwysihtmlを使ってみてはいかがでしょう。シンプルな作りでカスタマイズして自分たちのニーズに合わせたWYSIWYGエディタが手に入るでしょう。

wysihtmlの使い方

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

bower install wysihtml  

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

<!-- toolbar with suitable buttons and dialogues -->

  
bold  
italic  
H1  
P  

  
  
<!-- element to edit -->  

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

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

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

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

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

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

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

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

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

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

Wysihtml editor
Voog/wysihtml