kindeditor4.1.4 asp.net C# 配置及相關使用技巧 附帶讀取txt文本方法

之前有過一片文章是對幾款在線編輯器的測試  (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; 


發佈了28 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章