日期:2014-05-17 浏览次数:21200 次
之前有过一片文章是对几款在线编辑器的测试 (http://blog.csdn.net/spritenet/article/details/8085378),其中对ckeditor 的测试我一直没写
主要也是因为对FCK用的时间太长,确实功能也很强大,缺点也很明显,就是太臃肿了,配置太麻烦,因此kindeditor就成了不二的选择
之前那篇文章的kindeditor版本可能在3.3.x,有一些很关键的功能不是很完善,比如
1.没有图文混排,这个功能在fck中貌似叫模版,可以像word一样将图片插在一堆文字中或者放至在各个角落 或者中间,即使从fck中将模版代码复制过来,效果也无法显示
2.没有图片的批量上传
3.图片上传后没法再次设置图片大小
4.从word中复制过来后,原来设置的行间距失效,一段文字都是紧紧密密的排在一起
其中1和4的问题是比较致命的,在word中的效果直接显示不出来
KindEditor 4.1.4发布以后我也测试了一下,使用效果还是可以,至少我上面提到的几个问题都有改进,下载就总结一下这款4.1.4的编辑器
配置还是比较简单的,至少比3.x的配置简单,大家去KindEditor 4.1.4的官网下载demo就行,或者去下载我修改过的版本,下载地址:
http://download.csdn.net/detail/spritenet/4773195
官网的asp.net的语言是vb,我移植到C#上了,所以应该是更简单一些
下面介绍下我配置过的这版
一共有两个文件夹,kindeditor和upload,kindeditor下是一些配置文件,upload_json.ashx和file_manager_json.ashx也在,这两个文件主要功能是控制上传及上传图片存放的位置,upload就是存放上传文件的地方
添加bin下的LitJSON.dll引用,将kindeditor和upload复制到网站根目录下,在页面中加入如下代码
<head runat="server"> <meta charset="utf-8" /> <title>KindEditor ASP.NET</title> <link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" /> <script charset="utf-8" src="kindeditor/kindeditor.js"></script> <script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script> <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script> <script> KindEditor.ready(function(K) { var editor1 = K.create('#content1', { cssPath : 'kindeditor/plugins/code/prettify.css', uploadJson : 'kindeditor/upload_json.ashx', fileManagerJson : 'kindeditor/file_manager_json.ashx', allowFileManager : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); } }); prettyPrint(); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="content1" runat="server" Height="300px" Wi