フォーム入力用のWYSIWYG

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とかの自動補完を何とかしてほしい・・・。仕様と言えば仕様なんだけど、勝手に変わっていて涙目になる。

なので登録するときは、リンクや画像も絶対パスになっちゃうよね・・・。

""とかが勝手に外れるのもいただけないな。