基于FCKEditor 开发JSI Editor装饰器

jindw

浏览: 508321 次
性别:
来自: 初到北京

最近访客更多访客>>

scj2cy

manayi

xkj

lihaiou32

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JSI fckeditor 浏览器 Dojo prototype

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

海纳百川，有容乃大。

查看图片附件

分享到：

从零开始 Spinner（微调器）装饰器开发： | 函数申明和变量申明的微妙区别

2007-05-12 10:51
浏览 3622
评论(2)
论坛回复 / 浏览 (2 / 6310)
分类:Web前端
查看更多

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

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于FCKEditor 开发JSI Editor装饰器

基于FCKEditor 开发JSI Editor装饰器：

组件介绍：

效果：

装饰器实现代码：

装饰器定义代码：

使用方法：

总结：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于FCKEditor 开发JSI Editor装饰器

基于FCKEditor 开发JSI Editor装饰器：

组件介绍：

效果：

装饰器实现代码：

装饰器定义代码：

使用方法：

总结：

评论

发表评论

相关推荐

最近访客更多访客>>