基于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
金大为 阅读(83)
评论(0) 编辑 收藏