很久以前就想試試看現有的Rich Text Editor如何programming,
結果比想像中簡單很多.
1. 加入Script與body class定義
2. 加入Editor rendering
<body class="yui-skin-sam">
<textarea name="msgpost" id="msgpost" cols="50" rows="10">
<strong>Your</strong> HTML <em>code</em> goes here.<br>
This text will be pre-loaded in the editor when it is rendered.
</textarea>
</body><script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('msgpost');
myEditor.render();
</script>3. 透過Java Script event驅動更新textarea
(重點是將驅動事件, 以id指定, 此例子是以button的id="update"指定關連)
<input name="submit" id="update" type="submit" value="Update"><script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('msgpost');
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('update', 'click', function() {
//將Editor中的資料回存到textarea中, 如此送出資料即可得Editor中的資料
myEditor.saveHTML();
//有需要直接存取Editor中的資料可利用底下code, html中會存放編輯好的資料
var html = myEditor.get('element').value;
});
</script>Note:php中假如沒有關掉magic_quotes (Note: If magic_quotes_sybase is on, no backslashes are stripped off but two apostrophes are replaced by one instead.)
需要透過stripslashes()將\給去除.
reference: YUI 2: Rich Text Editor
沒有留言:
張貼留言