kindeditor4.1.4 asp.net C# 配置及相关使用技巧 附带读取txt文本方法

时间:2022-08-29 16:55:26

之前有过一片文章是对几款在线编辑器的测试  (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#上了,所以应该是更简单一些

 

下面介绍下我配置过的这版

kindeditor4.1.4 asp.net C# 配置及相关使用技巧 附带读取txt文本方法

一共有两个文件夹,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')对应起来,否则不显示编辑器

这就配置完了,编译运行即可

 

kindeditor4.1.4 asp.net C# 配置及相关使用技巧 附带读取txt文本方法

 

这一段用来指定kindeditor的路径

 

 

 

使用感受如下:

以上提到的四个问题在4.1.4这个版本中均得到了改善,甚至还有令人欣喜的地方

1.加入了批量上传功能,图片插入编辑器后,在图片上右击就可以修改图片大小及对齐方式,对齐方式除了第一项以外,第二项和第三项已经实现了图文混排的功能 ,文字可以直接在图片右侧显示

kindeditor4.1.4 asp.net C# 配置及相关使用技巧 附带读取txt文本方法

2.图文混排,上面已经说了,可以在插入图片的时候就设置,另外还有一个“模版”,有“图片和文字”“表格”和“项目编号”,唯一的不足就是“图片和文字”中只有一个版式,和fck相比模版还是少了一些

kindeditor4.1.4 asp.net C# 配置及相关使用技巧 附带读取txt文本方法

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;