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
メソッドを定義している箇所を確認
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にマージされていないのでダウンロードする際は注意が必要です。