wysihtml5とは?

高速でかつ軽量なHTML5ベースのオープンソースWYSIWYGエディタです。

特徴

なんといってもHTML5のマークアップを生成してくれること！
WYSIWYGエディタといえば、TinyMCEが有名ですが、
TinyMCEと比べてシンプルで扱いやすく導入も簡単です。

対応ブラウザも多く、Bootstrap用のプラグインbootstrap3-wysihtml5もあるので
フレームワークとしてBootstrapを使用している場合にはおすすめです。

bootstrap3-wysihtml5のバグ

AdminLTEを利用していたのですが、
そのAdminLTEに含まれるbootstrap3-wysihtml5プラグインにバグがありました。

wysihtml5を適用したエディタの内容を書き換えようとした際に以下のエラーが発生

エラー内容

 Cannot read property 'setValue' of undefined

ソース

// #textareaがwysihtml5エディタを適用した要素
$('#textarea').data('wysihtml5').editor.setValue('内容');

調べてみると、wysihtml5のeditorオブジェクトがundefinedになっていました。

解決方法

参照しているファイル（bootstrap3-wysihtml5.min.jsまたはbootstrap3-wysihtml5.all.min.js）の
createEditorメソッドを定義している箇所を確認

bootstrap3-wysihtml5.min.jsまたはbootstrap3-wysihtml5.all.min.js

 createEditor: function(options) {
    options = options || {};

    // Add the toolbar to a clone of the options object so multiple instances
    // of the WYISYWG don't break because 'toolbar' is already defined
    options = $.extend(true, {}, options);
    options.toolbar = this.toolbar[0];
    
    this.initializeEditor(this.el[0], options);
 },

以下の記述を

修正前

this.initializeEditor(this.el[0], options);

以下に変更

修正後

return this.initializeEditor(this.el[0], options);

これでエディタの内容を書き換えることができました。

原因

AdminLTEに入っているbootstrap3-wysihtml5プラグインのバージョンが古いことが原因でした。
なので、editorオブジェクトがundefinedである場合は、
特定のコミットが含まれていることを確認してみてください。
上記のコミットはbootstrap3-wysihtml5.min.jsまたはbootstrap3-wysihtml5.all.min.jsにマージされていないのでダウンロードする際は注意が必要です。