Kindediter编辑器的使用

       网站最初用了FCKediter这个编辑器，在开发调试的时候，倾向于火狐浏览器，所以一直处于正常的状态，但是有一天，突然用IE测试的时候他就歇菜了，就不可以了。这下子我犯愁了，出什么问题都好，就是怕出现兼容问题，一出现兼容问题，我就不知道怎么办了。

       从网上查找了一下下，原来是FCKEditer有兼容的问题，这下好了，从网上找了各种方法都不OK。最终下定决心，从新找一款编辑器。这样从CKEditer到UEediter,之后再到现在现存下来的kindEditer。讲一下KindEditer如何使用

   

         第一：到这里下载一个KindEditer。

                      http://kindeditor.net/down.php

       第二：将下载下来的压缩包进行解压，在asp.Net文件夹下有一个bin文件夹，将bin中的“LitJSON.dll”添加引用，同时引用kindediter解压的这个文件夹

                     

       第三：新建一个页面，所以的代码如下：

引用脚本：

    <script src="../../kindeditor-4.1.10/kindeditor.js" type="text/javascript"></script>
    <script src="../../kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>
    <script src="../../kindeditor-4.1.10/plugins/code/prettify.js" type="text/javascript"> </script>
    <link href="../../kindeditor-4.1.10/themes/default/default.css" rel="stylesheet" type="text/css" />
    <link href="../../kindeditor-4.1.10/plugins/code/prettify.css" rel="stylesheet" type="text/css" />

前台Javascript代码：

      <script type ="text/javascript">
	KindEditor.ready(function(K) {
			var editor1 = K.create('#editor_id', {
				cssPath : '../../kindeditor-4.1.10/plugins/code/prettify.css',
				uploadJson : '../../kindeditor-4.1.10/asp.net/upload_json.ashx',
				fileManagerJson : '../../kindeditor-4.1.10/asp.net/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();
		});
		
		KE.show({
    id : "editor_id",
    width : "650px", //编辑器的宽度为70%
    height : "300px", //编辑器的高度为100px
    filterMode : false, //不会过滤HTML代码
    resizeMode : 1 //编辑器只能调整高度
});
</script>

前台代码：

       <tr>
           <td class="leftColumn" colspan="2" style ="text-align :left ;padding-left: 150px;">
           商品详细图文介绍:<div class="Description" style ="color :black">(图片宽度不能超过650px)</div>
           </td>
       </tr>
       <tr>
           <td  colspan='4'>
               <div  style="margin-left: 150px;">
                  <asp:TextBox ID="editor_id" runat="server"></asp:TextBox>
               </div>
           </td>
      </tr>

       这里添加了一个text文本框，注意文本框的名称和上边的javascript引用的名称一样，以我的理解应该是将其做一个容器吧。

       让我们实战一下：（这是产品发布，填好要发布的图片内容，写入kindediter中）

                                        

        这是在编辑器中上传的一些图片和文字，我们看一下发布商品以后的效果：

                                             

       如果在编辑器中排版一下会更好看的。

       每次尝试做一个新东西的时候，都会先做一个Demo，但是有的时候虽然Demo做好了，但是放在实际的程序中却出问题，这就要看我们对这个东西的熟悉程度了。新的东西研究起来其实也没那么困难，就看你怎么去对待他，看你的心态是什么样子的了。

       挑战继续，学习ing。。。