本文介绍了一种基于FCKEditor开发的JSIEditor装饰器，该装饰器用于实现可视化的HTML编辑功能，并展示了如何通过简单的XML配置在网页中集成此装饰器。
基于FCKEditor 开发JSI Editor装饰器：
组件介绍：
JSI Editor装饰器，是一个用于可视化html编辑的组件（当能，将来也可考虑其他格式，如ubb），在标记设计上，参照Mozilla XUL的editor标记。而具体实现上，使用FCKEditor。效果：
装饰器实现代码：
- /**
- * @public
- * @decorator editor
- * @attribute src
- * @attribute contenttype text/html(默认值) text/ubb ....
- */
- 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();
- }
- }
装饰器定义代码：
装饰器定义其实就是普通类库定义，没有任何区别。- //选自org/xidea/decorator/__$package.js,删除了无关信息
- 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 组件集。海纳百川，有容乃大。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
