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。。。



评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值