适用Ext任何版本,我用的Ext2.0.2,因为是LGPL协议的
由于KindEditor于9.26推出了4.0正式版,我也将控件升级到了4.0版,原来使用的4.0beta版,正式版确实改了不少bug,至少改掉了,切换源代码编辑后,读取对象失效的问题
Ext中的HTML编辑器,功能虽然不错,但是离商业项目实用,还是有一定的距离,所有本人在一直都是将第三方编辑器,集成进入Ext,原来使用的FckEditor2.6,并且还增加了一系列实用功能,但是最近发现一个比较严重的问题,就是浏览器兼容性上存在问题,它问文件管理(上传、查看、删除)在:火狐、谷歌、IE9上均不能正常运行,想了很多办法,结果都不理想,本来准备实用它的最新版本,但是到官网上去看,居然要收费了,并且费用貌似很高,800多美元(当然,本人英语水平有限,如果有错误,欢迎指出),想想还是算了,最后我选择了,国产的KindEditor4.0版本,它的功能也强大, 关键是它的许可是 LGPL,废话不多说了,直接看看运行效果,后面有代码
KindEditor功能并不比CKEditor弱多少,下面展示的一个个人认为比较拉风的功能
在这个控件中查询到你要的地址后,直接点击确定,就可以将图片截取下来,并放置在编辑框中
将它提供的lib、jsp文件放置到正确的位置,就可以使用它的文件管理、上传、文件删除功能
后面,我提供了一个完整的项目,使用JavaWeb打开即可,老做程序的应该都能知道如何将项目跑起来
实在不知道的可以给我留言,下面是一个大一点的图片,大家可以看得更清楚
上传路径,我修改了一下,使用这样的方式上传的,/attached/image/2011/09/22/xxx.jpg
大家觉得不好,完全可以到/editor/kindeditor4/jsp/upload_json.jsp中进行修改
文件删除功能,是我新加上去的,源码就在jsp下的file_delete.jsp,当然,如果大家觉得我写得不好,完全自己修改,不过要,遵从LGPL协议,开源即可
将KindEditor集成进Ext的代码在这里,我这要说以下
在5~10行,使用了jquery方法,我是为了图方面,目的是读取父类对象,然后清除内容,将KindEditor那段字符串,添加进去,你完全可以更换成其他的代码,页面就可以导入jquery.js了
还有一点,我要说一下,我的setValue操作,是启用一个表单,将信息通过post方式传递到iframe中的KindEditor,避免了异步而引起的一系列问题,实践证明,很好用哈
Ext.form.KindEditorPanel = Ext.extend(Ext.form.TextArea, {
onRender : function(ct, position){
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
this.fieldId = this.fieldName+'KindEditor';
var parentEle = $(this.el.dom).parent();
this.height = isNaN(this.fieldHeight) ? 200 : this.fieldHeight;
parentEle.empty()
var random = Math.random();
parentEle.append("<iframe id="+this.fieldId+
" name="+this.fieldId+
" height="+this.height+
" width=97% src=editor/kindeditor4/editor.jsp?ran="+random+
" frameborder=0 scrolling=no marginwidth=0 marginheight=0></iframe>"+
" <form action='editor/kindeditor4/editor.jsp?ran="+random+
"' id="+this.fieldId+"Form method=post target="+this.fieldId+
" style='display: none;'>"+
" <textarea name='editorValue'></textarea>"+
" <input type='submit'/>"+
" </form>");
},
getValue : function(){
//这里可能存在延迟,所以,如果如果没有数据,不管即可,反正在读取的时候,肯定有值
var func = window.frames[this.fieldId].getValueForEditor;
if(func){
return window.frames[this.fieldId].getValueForEditor();
}else{
return "";
}
},
setValue : function(v){
//直接通过请求方式传递,首先读取父页面的editorForm对象
var editorForm = document.getElementById(this.fieldId+"Form");
editorForm.editorValue.value = v;
editorForm.submit();
}
});
Ext.reg('kindeditor',Ext.form.KindEditorPanel);
最后是工程源码,没有其他业务,就一张html页面,一个使用示例
- 大小: 18.5 KB
- 大小: 18 KB
- 大小: 132.3 KB
- 大小: 145.6 KB
- 大小: 24.8 KB
分享到:
相关推荐
kindeditor4.0.NET集成版(含图片和附件上传), 删除多余其他语言文档,修改js和ashx文件,上传文件按日期分文件夹存放。 kindeditor是一款较轻量级的国产富文本编辑器,包括300多K的表情包,和各类图片,总共只有...
kindEditor4.0已经解决了上传问题
KindEditor 4.0 变更记录: 新增: 锚点功能。 新增: 增加loadStyleMode属性,默认情况下自动加载CSS文件。 新增: 编辑器对象增加isDirty方法,判断编辑器内容是否有修改。 改善: 粘贴MS Word时自动清理Word专用...
KindEditor 4.0 beta 非常好用的HTML编辑器
KindEditor是一套开源的在线HTML编辑器,主要用于让用户... KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的...
在线HTML编辑器 KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
相比较于去年9月3日发布的3.3版本而言,4.0版本在UI、安装升级、使用流程、操作体验方面都做了重大的改进和突破。我们后面会重点对4.x系列版本提供技术支持和扩展,之前的版本我们将陆续放弃支持,强烈建议每一位...
解决kindEditor4.0+中上传图片到七牛的问题,代码是PHP版本的,方便好用!
首先,需要在kindEditor官网上下载4.0版本的包(注意,版本一定要是4.0)。 具体地址如下:http://code.google.com/p/kindeditor/downloads/list 具体用在ExtJs中的用法如下 1)对应的JSP需要引入 <link rel=”...
kindeditor集成jmeditor公式HTML富文本编辑器,javaWeb版本,嵌入项目即可使用。
KindEditor是在国内比较受欢迎的HTML在线编辑器,本次更新新增单元格编辑功能,各种按钮(确定、取消、上传等按钮)在不同浏览器上保持相同外观。 主要变化 新增单元格编辑功能。(右键点击单元格可以看到编辑选项...
java集成富文本编辑器KindEditor,实现富文本的排版,图片上传,内容提交等
kindeditor集成jmeditor公式web编辑器 已经集成好了直接配置好调用就行 版本为KindEditor 4.1.10 JMEditor-0.9.4
kindeditor乱码解决版,解决中文乱码问题
主要介绍了vue集成kindeditor富文本的实现示例代码,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
kindeditor(ASP版本) 超好用的!删除了无用文件,有编辑器和单文件上传2种模式
压缩包内韩使用说明,KindEditor(ASP版编辑器兼容最新浏览器),一般用于老ASP程序的编辑器升级。
资源名:KindEditor ASP 版后台编辑器源码 资源类型:程序源代码 源码说明: KindEditor ASP版后台编辑器UTF-8和GB2312均可用 这是KindEditor的ASP版网站后台编辑器,通过测试使用的。 兼容现有的各种浏览器,UTF-8...