基于FCKEditor 開發JSI Editor裝飾器：
組件介紹：
JSI Editor裝飾器，是一個用于可視化html編輯的組件（當能，將來也可考慮其他格式，如ubb），在標記設計上，參照Mozilla XUL的editor標記。而具體實現上，使用FCKEditor。
效果：
裝飾器實現代碼：
-
-
-
-
-
-
- function Editor(){
-
- }
- Editor.prototype = new Decorator();
- Editor.prototype.decorate = function(){
- var container = this.getContainer();
- var textarea = container.getElementsByTagName('textarea')[0];
- var fckEditor = new FCKeditor(textarea.name);
- var src = this.attributes.get('src');
- if(src){
- new Request(src,
- {asynchronous:true}).setFinishListener(function(){
- textarea.value = this.getText()||textarea.value;
- fckEditor.ReplaceTextarea();
- }).send();
- }else{
- fckEditor.ReplaceTextarea();
- }
- }
裝飾器定義代碼：
裝飾器定義其實就是普通類庫定義，沒有任何區別。
-
- this.addScript("editor.js",'Editor');
- this.addObjectDependence("*",
- "js.html.Decorator",true);
- this.addObjectDependence("Editor",
- "js.io.Request",false);
- this.addObjectDependence("Editor",
- "net.fckeditor.FCKeditor",false);
使用方法：
使用JSI裝飾器，需要在頁面上做如下處理：
- 增加命名空間（xmlns:d="http://www.xidea.org/taglib/decorator"）
- 加入JSI引導腳本（<script src="../scripts/boot.js"></script>）
- 加入所用裝飾器的標記
簡單示例：
- <?xml version="1.0" encoding="utf-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml"
- xmlns:d="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"
- lang="zh_CN">
- <head>
- <script src="../scripts/boot.js"></script>
- <title>Editor 示例</title>
- </head>
- <body>
- <d:editor>
- <textarea name='editorText'>
- 待編輯html:<br>
- This is some <strong>sample text</strong>. <br>
- You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.<br>
- </textarea>
- </d:editor>
- </body>
- </html>
總結：
JSI 裝飾器是一個新事物，如果要一切從零開始，是一個艱巨的任務；但是，借助于JSI無侵入的特性，我們可以集百家之長。在前人豐厚的積累上，創造出更加簡單易用的ui 組件集。
海納百川，有容乃大。 |
評論也很精彩，請點擊查看精彩評論。歡迎您也添加評論。查看詳細 >>
JavaEye推薦
杭州:外企高薪聘請系統維護工程師(10-15K)
杭州:國內大型網絡公司高薪招聘系統架構師,資深JAVA開發工程師
北京：優秀公司NHNChina招聘:WEB開發,系統管理,JAVA開發, DBA
廣州：急招 JAVA開發經理/系統架構師（10－15K/月）也招聘java程序員
文章來源:
http://jindw.javaeye.com/blog/79063
posted on 2007-05-12 10:51
金大為 閱讀(90)
評論(0) 編輯 收藏