基于FCKEditor 开发JSI Editor装饰器

阅读更多

基于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引导脚本(
  3. 加入所用装饰器的标记
简单示例:
 
  1. xml version="1.0" encoding="utf-8"?>  
  2. >  
  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 textstrong><br>  
  15.   You are using <a href="http://www.fckeditor.net/">FCKeditora>.<br>  
  16.   textarea>  
  17. d:editor>  
  18. body>  
  19. html>  

总结:

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

海纳百川,有容乃大。
  • 基于FCKEditor 开发JSI Editor装饰器_第1张图片
  • 大小: 57 KB
  • 查看图片附件

你可能感兴趣的:(JSI,fckeditor,浏览器,Dojo,prototype)