论坛首页 Web前端技术论坛

基于FCKEditor 开发JSI Editor装饰器

浏览 6314 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-05-12  

基于FCKEditor 开发JSI Editor装饰器:


组件介绍:

JSI Editor装饰器,是一个用于可视化html编辑的组件(当能,将来也可考虑其他格式,如ubb),在标记设计上,参照Mozilla XUL的editor标记。而具体实现上,使用FCKEditor。

效果:


 

装饰器实现代码:

 
  1. /** 
  2.  * @public 
  3.  * @decorator editor 
  4.  * @attribute src 
  5.  * @attribute contenttype text/html(默认值) text/ubb .... 
  6.  */  
  7. function Editor(){  
  8.   
  9. }  
  10. Editor.prototype = new Decorator();  
  11. Editor.prototype.decorate = function(){  
  12.   var container = this.getContainer();  
  13.   var textarea = container.getElementsByTagName('textarea')[0];  
  14.   var fckEditor = new FCKeditor(textarea.name);  
  15.   var src = this.attributes.get('src');  
  16.   if(src){  
  17.     new Request(src,  
  18.     {asynchronous:true}).setFinishListener(function(){  
  19.       textarea.value = this.getText()||textarea.value;  
  20.       fckEditor.ReplaceTextarea();  
  21.     }).send();  
  22.   }else{  
  23.     fckEditor.ReplaceTextarea();  
  24.   }  
  25. }  


装饰器定义代码:

装饰器定义其实就是普通类库定义,没有任何区别。
 
  1. //选自org/xidea/decorator/__$package.js,删除了无关信息  
  2. this.addScript("editor.js",'Editor');  
  3. this.addObjectDependence("*",  
  4.     "js.html.Decorator",true);  
  5. this.addObjectDependence("Editor",  
  6.     "js.io.Request",false);  
  7. this.addObjectDependence("Editor",  
  8.     "net.fckeditor.FCKeditor",false);   



使用方法:

使用JSI装饰器,需要在页面上做如下处理:
  1. 增加命名空间(xmlns:d="http://www.xidea.org/taglib/decorator")
  2. 加入JSI引导脚本(<script src="../scripts/boot.js"></script>)
  3. 加入所用装饰器的标记
简单示例:
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4.   xmlns:d="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"  
  5.   lang="zh_CN">  
  6. <head>  
  7. <script src="../scripts/boot.js"></script>  
  8. <title>Editor 示例</title>  
  9. </head>  
  10. <body>  
  11. <d:editor>  
  12.   <textarea name='editorText'>  
  13.    待编辑html:<br>  
  14.   This is some <strong>sample text</strong><br>  
  15.   You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.<br>  
  16.   </textarea>  
  17. </d:editor>  
  18. </body>  
  19. </html>  

总结:

JSI 装饰器是一个新事物,如果要一切从零开始,是一个艰巨的任务;但是,借助于JSI无侵入的特性,我们可以集百家之长。在前人丰厚的积累上,创造出更加简单易用的ui 组件集。

海纳百川,有容乃大。
  • 大小: 57 KB
   发表时间:2007-05-12  
dojo就够慢的 fck也慢 再加上这个包装 !

简化客户端的js提高维护性和开发效率还有其他方法

1 在cilent端对js进行包装
楼主用xml标签来做确实很简单

2 服务器准备加工好的dom节点 cilent的js拿来直接用.
我现在这么做 因为我采用的框架特殊 这么做很简单.

3 浏览器集成 功能view一体的UI.
比如xform 

如果在浏览中集成这种东西我双手赞成. 将客户端搞的更胖我双手反对.
0 请登录后投票
   发表时间:2007-05-12  
不明白,这与Dojo何干?
这个例子要说慢,主要是Fck,没有办法,JS做成那样的功能,就得慢。

不过,这种速度,我认为还是可以接受得。将来硬件新能的提升,这个问题也会越来越小。

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics