基于FCKEditor 开发JSI Editor装饰器:
组件介绍:
JSI Editor装饰器,是一个用于可视化html编辑的组件(当能,将来也可考虑其他格式,如ubb),在标记设计上,参照Mozilla XUL的editor标记。而具体实现上,使用FCKEditor。
效果:
装饰器实现代码:
-
-
-
-
-
-
- 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();
- }
- }
装饰器定义代码:
装饰器定义其实就是普通类库定义,没有任何区别。
-
- 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 组件集。
海纳百川,有容乃大。
- 大小: 57 KB
分享到:
相关推荐
FCKeditor开发jar包及fckeditor文件夹
FckEditor在线编辑器FckEditor在线编辑器FckEditor在线编辑器
简单易操作ASP.NET mvc使用FCKeditor.zip在线编辑器示例
实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。 1. 配置控件语言 FCKeditor是自动探测浏览器...
FCKeditor编辑器hwp363FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363FCKeditor编辑器hwp363 FCKeditor编辑器hwp363
fckeditor开发.net-Demo带上传图片功能,方便开发者使用.
FCKeditor 网页文本编辑器(asp.net),使用的时候注意设置页面的属性ValidateRequest="false"。 1.引用FredCK.FCKeditorV2.dll。 2.打开网站,选择工具箱,找到其中 常规 选项卡 ,点击右键选择 -->选择项--->浏览 ...
比起ckeditor编辑器,还是觉得这个好用,可直接复制到自己的项目上去使用,使用文档里有使用指南!
fckeditor在线编辑器
用FCK编辑器的如果后台没登录/fckeditor/editor/filemanager/browser/default/browser.html 页面也能上传东西的 在/FCKEditor/editor/filemanager/connectors/aspx/config.aspx 页面里改下登录限制 FCK 编辑器的...
FCKeditor_2.6.4 在线编辑器最终版,完整功能
FCKeditor (jsp在线编辑器)配置总结
Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤
如何在表单页面中调用FCKeditor在线文本编辑器、如何配置出适合用户的在线文本编辑器、如何实现文件的上传功能和如何配置所要上传的文件类型等
fckeditor在线文本编辑器, 可嵌入javascript中,用于页面文字、表情编辑,上传文件等,方便实用
通过复制粘贴实现FCKeditor 的使用. 看拉大家的留言,为使大家下载多能使用,补充个注意点; 在jsp页面出现FCKeditor 引用错误. 把页面中的下面代码中 <FCK:editor id="infoContent" basePath="../../FCKeditor/" ...
fckeditor在线编辑器,可以直接使用
fckeditor 用于web页面开发的文档编辑插件,非常方便使用。
工程目录下FCKeditor/FCKeditor-v2.6.3/fckeditor/_samples/default.html文件是我根据自己的理解对它的文档进行修改的测试程序,所以只能作为参考,未必正确
FCKEditor 在线编辑器,很好用的在线编辑器,大家都应该知道吧