`
yangpanwww
  • 浏览: 624646 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

KindEditor4.1编辑器的使用、封装及扩展

阅读更多

web开发中。。少不了编辑器的使用。。经过各个编辑器的比较。个人认为 KindEditor4.1 编辑器非常的不错

 

觉得她简单而美丽....就像一个漂亮的妞。。。嘿嘿。。。而且提供了API。。容易扩展。。

 

下面的我封装了 KindEditor4.1 的一些方法。。。让我们在开发中只要配置来实现就好了。。。

附件中提供了 源码和jar   。。省的你们去反编译了。。嘿嘿。。。

1.将以下的JAR包放到工程的lib目录下  


    * commons-fileupload-1.2.1.jar
    * commons-io-1.4.jar
    * kindeditorservlet.jar  --jkd1.6 下面编译的

 

2.web.xml 的servlet及相关属性设置
 

<!-- kindeditor上传 -->
 <servlet>
  <servlet-name>UploadSerlet</servlet-name>
  <servlet-class>
   com.yangpan.kindeditor.UploadSerlet
  </servlet-class>
  <!-- 上传保存的目录 -->
  <init-param>
   <param-name>UPLOAD_PATH</param-name>
   <param-value>attached/</param-value>
  </init-param>
  <!-- 限制上传图片的大小,单位字节(缺省值为1MB) -->
  <init-param>
   <param-name>Img_MAX_SIZE</param-name>
   <param-value>1024000</param-value>
  </init-param>
  <init-param>
   <!-- 上传图片的类型(缺省值为gif, jpg, jpeg, png, bmp) -->
   <param-name>Img_YPES</param-name>
   <param-value>gif,jpg,jpeg,png,bmp</param-value>
  </init-param>
  <!-- ===================================================================== -->
  <!-- 上传附件的大小,单位字节(缺省为1MB) -->
  <init-param>
   <param-name>File_MAX_SIZE</param-name>
   <param-value>1000000</param-value>
  </init-param>
  <!-- 上传文件的类型(缺省为doc, xls, ppt, pdf, txt, rar, zip) -->
  <init-param>
   <param-name>File_TYPES</param-name>
   <param-value>doc,xls,ppt,zip,rar,txt</param-value>
  </init-param>
 </servlet>
 <servlet>
  <servlet-name>FileManagerServlet</servlet-name>
  <servlet-class>
   com.yangpan.kindeditor.FileManagerServlet
  </servlet-class>
  <!-- 上传保存的目录 -->
  <init-param>
   <param-name>UPLOAD_PATH</param-name>
   <param-value>attached/</param-value>
  </init-param>
 </servlet>
 
 <servlet-mapping>
  <servlet-name>UploadSerlet</servlet-name>
  <url-pattern>/servlet/UploadSerlet</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
  <servlet-name>FileManagerServlet</servlet-name>
  <url-pattern>/servlet/FileManagerServlet</url-pattern>
 </servlet-mapping>
 

 
3.KE 相关属性设置

 

 

KindEditor.ready(function(K) {
        editor = K.create('textarea[name="bean.content"]', {
     width : '680px',
     height: '250px',
     newlineTag : 'br',
     resizeType : 0,
     allowPreviewEmoticons : true,
     allowImageUpload : true,
     items : [
         'source', '|', 'undo', 'redo', '|', 'preview',
      'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
      'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
      'insertunorderedlist', '|', 'emoticons', 'image','multiimage', 'insertfile', 'link', 'table', 'wordpaste', 'clearhtml'],
      cssPath : '../kindeditor/plugins/code/prettify.css',
     uploadJson : '<%=path%>/servlet/UploadSerlet',
     fileManagerJson : '<%=path%>/servlet/FileManagerServlet',
     allowFileManager : false,
     afterCreate : function() {
      var self = this;
      K.ctrl(document, 13, function() {
       //self.sync();
       //document.forms['example'].submit();
       edit();
      }); 
     }
    });
    prettyPrint();
   });

 
   
4.创建上传目录attached 

 

这样就完成了 ...Kindeditor的搭建。。。

 

 

5.扩展--添加文件管理的删除功能---题外话

 

在 目录中 找到 filemanager.js 文件...在约182中添加如下代码

				K('<span style="float:left;width:30px; text-align:center;" ><a href="#">删除</a></span>').appendTo(div).click(function() {
					//self.removeFile(file.id);
					alert('ssss'+data.filename+"==="+themesPath);
				});

 

在大约 194 行添加一个方法。

	function removeRemoteFile(){
		var imgUrl = K(this).attr("rel");
        imgUrl = imgUrl.replace(BASEURL, "");//BASEURL为我自己定义的网站路径,可根据实际删除掉
        var url = BASEURL + "/Manager/KindEditor/Delete";//服务器后台处理程序
        K.ajax(url, function (data) {
            if (data == "1") {
                reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
            } else {
                alert("删除数据错误");
            }
        }, "POST", {
            imgUrl: imgUrl//往后台传的参数,其实就是传个路径,后台根据这个路径去删除路径下的图片
        });
	}

 

 

我想这样就可以实现删除的功能。。。具体还没有完成。。。先记着!!!!

 

实现的效果如:

 

图1:



 

 

图2:



 

 

 

我想。。如果可以的话。。我们就可以实现远程管理服务器的文件。。。这个功能是很实用的。。。。

 

大家可以下载附件 mi.rar   吧。。。如果你们扩展了。。记得告诉我啊啊啊啊啊!!

 

有疑问也可以大家一起交流QQ:609865047

 

我最近都没时间。。忙死啦!

  • mi.rar (1 MB)
  • 下载次数: 162
  • 大小: 20.1 KB
  • 大小: 20.1 KB
  • 大小: 37.5 KB
分享到:
评论
3 楼 w156445045 2012-11-17  
yangpanwww 写道
w156445045 写道
JSP上传出现错误,JS报错没有权限kindeditor.js

请问是什么原因啊,

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了,谢谢。



额。。你的问题怎么样了?

解决了,谢谢,呵呵。
2 楼 yangpanwww 2012-11-16  
w156445045 写道
JSP上传出现错误,JS报错没有权限kindeditor.js

请问是什么原因啊,

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了,谢谢。



额。。你的问题怎么样了?
1 楼 w156445045 2012-11-15  
JSP上传出现错误,JS报错没有权限kindeditor.js

请问是什么原因啊,

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了,谢谢。

相关推荐

    kindEditor4.1版修改上传图片宽高(图片自适应)

    在使用kindEditor4.1版本时,我们可能会遇到一个常见的问题:上传的图片无法很好地适配不同大小的屏幕,导致在某些设备上出现拉伸或失真的现象。为了改善用户体验,我们需要实现图片自适应功能,即无论页面如何缩放...

    kindeditor编辑器-封装

    KindEditor是一款功能强大的开源在线富文本编辑器,它支持多种浏览器环境...通过这样的封装,开发者可以在项目中快速地集成和使用KindEditor,只需几行代码就能实现一个功能完善的富文本编辑器,极大地提高了开发效率。

    解决kindeditor 编辑器完美支持IE11 看不见上传文件框问题 无法保存问题

    在IT行业中,编辑器是开发和内容创作人员的必备工具,KindEditor作为一款流行的开源在线HTML编辑器,因其丰富的功能和良好的用户体验而受到广泛使用。然而,与许多软件一样,KindEditor在面对不同浏览器,尤其是老旧...

    kindeditor文本编辑器(asp.net中使用)

    kindeditor文本编辑器(asp.net中使用) 源代码都在

    给siteweaver6.8更换Kindeditor4.1.10编辑器

    【标题】"给siteweaver6.8更换Kindeditor4.1.10编辑器"涉及的主要知识点包括网站构建工具Siteweaver的升级与编辑器替换,以及Kindeditor的使用和功能特性。 Siteweaver是一款用于创建和管理网站的软件,它提供了基本...

    Kindeditor文本编辑器

    开发者可以根据需求编写自己的插件,进一步扩展编辑器的功能,比如添加视频上传、公式编辑、特殊字符选择等。这种开放性使得Kindeditor能适应各种不同场景的应用需求。 在安全方面,Kindeditor提供了有效的XSS过滤...

    kindeditor文本编辑器实例(包含本地图片上传及浏览服务器方法)

    KindEditor允许开发者根据需求自定义编辑器工具栏上的按钮,以扩展其功能。这涉及到编辑器的JavaScript API,通过调用`addButton`方法来添加新的按钮,并指定按钮的图标、名称、点击事件等属性。自定义按钮可以绑定...

    KindEditor文本编辑器使用说明

    最后,使用 KindEditor 的 API 创建编辑器实例,并根据需求进行参数配置,如调整编辑器高度、定制工具栏等。 KindEditor 还提供了自定义语言的能力,开发者可以通过修改或添加语言包来适应不同国家和地区用户的使用...

    彻底解决asp中KindEditor编辑器无法获得提交的数据

    在ASP环境中使用KindEditor编辑器时,可能会遇到一个常见问题:无法正确获取编辑器内用户提交的数据。这通常发生在需要将编辑器内的HTML内容作为表单的一部分提交给服务器端处理的情况下。为了解决这个问题,我们...

    asp 版的KindEditor 3.5.1编辑器 外部编辑器 web编辑器 最新版的KindEditor 编辑器 适合asp jsp的编辑器

    asp 版的KindEditor 3.5.1编辑器 外部编辑器 web编辑器 最新版的KindEditor 编辑器 适合asp jsp的编辑器 这是经过本人一个下午测试的 ,保证可以使用 在这拿出来 大家一起学习学习 QQ290273103

    KindEditor-4.1.9批量上传图片完整示例(可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能)

    这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...

    kindeditor文本编辑器

    KindEditor是一款开源的JavaScript富文本编辑器,专为网页设计者和开发者打造。它轻巧且功能强大,能够提供类似于Microsoft Word的编辑体验,让用户在网页上进行文字编辑、排版、插入多媒体内容等操作变得简单易行。...

    kindeditor编辑器使用及压缩包

    这个"kindeditor-4.1.10-zh-CN及使用"压缩包包含了该编辑器的中文版本及其详细使用指南,旨在帮助用户更好地理解和应用。 首先,KindEditor的核心功能包括基本的文字格式化、段落排版、插入图片、链接、表格、代码...

    jsp 版的KindEditor 3.5.1编辑器 外部编辑器 web编辑器 最新版的KindEditor 编辑器 适合asp jsp的编辑器

    jsp 版的KindEditor 3.5.1编辑器 外部编辑器 web编辑器 最新版的KindEditor 编辑器 适合asp jsp的编辑器 这是经过本人一个下午测试的 ,保证可以使用 在这拿出来 大家一起学习学习 QQ290273103

    kindeditor富文本编辑器

    总的来说,KindEditor是一个强大且易用的富文本编辑器,尤其适合与Java环境配合使用,为各种文本编辑应用场景提供了灵活且安全的解决方案。其丰富的功能、良好的扩展性和易用性,使得它在众多富文本编辑器中脱颖而出...

    KindEditor在线编辑器

    KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的...

    kindeditor在线编辑器最简模式.7z

    KindEditor是一款功能强大的开源在线编辑器,主要用于网页内容的创建和编辑。它的“最简模式”是为了提供一个简洁、高效的编辑界面,使用户能够专注于文本输入,而不被复杂的格式选项所干扰。在这个模式下,编辑器的...

Global site tag (gtag.js) - Google Analytics