jWYSIWYG
http://projects.bundleweb.com.ar/jWYSIWYG/
jQueryを用いた、軽量なWYSIWYG。
ちょこっと使用したい場合などに最適。
入力内容の保存タイミングに、少しだけ難があるので、メソッドを追加してコントロールすると吉。
以下170行目あたりに追加してみた。
save : function()
{
var self = $.data(this, 'wysiwyg');
var content = self.getContent();
self.setContent(content);
self.saveContent();
},
reset : function()
{
var self = $.data(this, 'wysiwyg');
self.setContent( $(self.original).val() );
self.saveContent();
},
resetの方は、自分でJSで送った内容を反映させるためのコード。
汚いけど、実際使うとこんな感じ。
(管理画面でアップロード済みの任意のリンク付き画像をWYSIWYGで入力したかったのでやってみた。)
$(function(){
$("a.appImg").click(function(ev) {
$('#wysiwyg').wysiwyg('save');
addSrc = $(this).attr('href');
addThumb = $(this).attr('rel');
addTags = '<a href="' + addSrc + '" rel="' + addThumb + '" class="クラス名"><img src="' + addThumb + '" border="0" /></a>';
tmpTxt = $('#wysiwyg').val() + addTags;
$('#wysiwyg').val(tmpTxt);
$('#wysiwyg').wysiwyg('reset');
return false;
});
});
WYSIWYGエリアに任意のCSSを反映させるには、
$(function(){
$('#wysiwyg').wysiwyg({ css : 'CSSファイル' });
});
でOK。
いつもこの手のJSベースのWYSIWYG使って思うんだけど、IEのURLとかの自動補完を何とかしてほしい・・・。仕様と言えば仕様なんだけど、勝手に変わっていて涙目になる。
なので登録するときは、リンクや画像も絶対パスになっちゃうよね・・・。
""とかが勝手に外れるのもいただけないな。