[导入]基于FCKEditor 开发JSI Editor装饰器

基于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 组件集。

海纳百川，有容乃大。

评论也很精彩，请点击查看精彩评论。欢迎您也添加评论。查看详细 >>

JavaEye推荐
杭州:外企高薪聘请系统维护工程师(10-15K)
杭州:国内大型网络公司高薪招聘系统架构师,资深JAVA开发工程师
北京：优秀公司NHNChina招聘:WEB开发,系统管理,JAVA开发, DBA
广州：急招 JAVA开发经理/系统架构师（10－15K/月）也招聘java程序员

文章来源: http://jindw.javaeye.com/blog/79063