`
jindw
  • 浏览: 501413 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
社区版块
存档分类
最新评论

基于FCKEditor 开发JSI Editor装饰器

JSIfckeditor浏览器Dojoprototype 
阅读更多

基于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
分享到：
| 函数申明和变量申明的微妙区别
评论
2 楼 jindw 2007-05-12  
不明白，这与Dojo何干？
这个例子要说慢，主要是Fck，没有办法，JS做成那样的功能，就得慢。

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

1 楼 winterwolf 2007-05-12  
dojo就够慢的 fck也慢 再加上这个包装 !

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

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

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

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

如果在浏览中集成这种东西我双手赞成. 将客户端搞的更胖我双手反对.
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics