之前有过一片文章是对几款在线编辑器的测试 (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" Width="900px"></asp:TextBox> </div> </form> </body>
TextBoxid要和K.create('#content1')对应起来,否则不显示编辑器
这就配置完了,编译运行即可
这一段用来指定kindeditor的路径
使用感受如下:
以上提到的四个问题在4.1.4这个版本中均得到了改善,甚至还有令人欣喜的地方
1.加入了批量上传功能,图片插入编辑器后,在图片上右击就可以修改图片大小及对齐方式,对齐方式除了第一项以外,第二项和第三项已经实现了图文混排的功能 ,文字可以直接在图片右侧显示
2.图文混排,上面已经说了,可以在插入图片的时候就设置,另外还有一个“模版”,有“图片和文字”“表格”和“项目编号”,唯一的不足就是“图片和文字”中只有一个版式,和fck相比模版还是少了一些
3.增加了行距设置,有1倍 1.5倍 2倍 2.5倍 3倍行距供选择,效果还是不错的
4.还增加了“插入程序代码”,这个和csdn的也差不多,也有多种语言
“一键排版”和“百度地图”等功能我觉得倒是一般,有了也不错
问题1 如果配置完后,单独上传图片,点提交后,那个圈圈一直转,上时间没法上传成功,或者批量上传时,点全部上传直接*上传失败,确定上传路径没有动过的话,将bin下的LitJSON.dll从新引用一遍即可
最后总结,这次升级功能还是比较大的,一些功能还需要慢慢消化,特别是最好能多推出几款混排模版,希望kindeditor以后越做越好
附带读取txt文本的方法
StreamReader Stream = new StreamReader(Server.MapPath("d1.txt"), System.Text.Encoding.GetEncoding("GB2312")); string Content = ""; Content = Stream.ReadToEnd(); Stream.Close(); Label1.Text = Content;