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