articles

2011 年 1 月 20 日

Yahoo YUIでWYSIWYG

Yahoo YUI2の Rich Text Editorを試しに導入してみましたのでメモします。

まず以下を読み込みます。




 
 






	

次に設定をしてレンダリングします。

var myEditor = new YAHOO.widget.Editor('#ID名', {
    height: '300px',
    width: '75%',
    dompath: true, 
    animate: true,
    handleSubmit:true
});
myEditor.render();

その後、bodyタグにクラスを入れました。

<body class="yui-skin-sam">

以上です。
最初、POSTしたときに行きませんでしたが
configulationでhandleSubmit:trueを記述するといけました。

2010 年 9 月 9 日

jHtmlAreaのデフォルトのツールバー

CATEGORYjavascriptjQueryWYSIWYG   12:58 PM

jHtmlAreaのデフォルトのツールバー
デフォルトであるサイズを変更するボタンとか追加したいなと思ったのですが
いまいちどこにあるのかわかりませんでしたので。

["html"], ["bold", "italic", "underline", "strikethrough", "|", "subscript", "superscript"],
["increasefontsize", "decreasefontsize"],
["orderedlist", "unorderedlist"],
["indent", "outdent"],
["justifyleft", "justifycenter", "justifyright"],
["link", "unlink", "image", "horizontalrule"],
["p", "h1", "h2", "h3", "h4", "h5", "h6"],
["cut", "copy", "paste"]

そしてツールバーの項目を変更する際のスクリプト

$(function(){
   $("textarea#content").htmlarea({
    toolbar: [
     ["html","|", "bold", "italic", "underline", "|", "forecolor"],
     ["increasefontsize", "decreasefontsize"],
     ["link", "unlink", "|", "image"],
     ["cut", "copy", "paste"]
	  ]
   });
});