フォーム入力用の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とかの自動補完を何とかしてほしい・・・。仕様と言えば仕様なんだけど、勝手に変わっていて涙目になる。
なので登録するときは、リンクや画像も絶対パスになっちゃうよね・・・。
""とかが勝手に外れるのもいただけないな。
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント