Kindediter编辑器的使用

最新推荐文章于 2024-09-20 10:13:41 发布

snow_li

最新推荐文章于 2024-09-20 10:13:41 发布

阅读量1.8k

点赞数

分类专栏：实习

本文链接：https://blog.csdn.net/u010196821/article/details/43268409

版权

实习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网站最初用了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中）