ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

ASP.NET开发之如何在ASP.NET中使用KindEditor编辑器

2021-05-12 20:04:38  阅读:222  来源: 互联网

标签:function ASP KindEditor ashx NET 上传


首先打开KindEditor的官网下载最新版的kindEditor

在这里插入图片描述
下载完成后解压,目录结构如下
在这里插入图片描述
由于我们使用的是ASP.NET,所以打开ASP.NET文件夹
在这里插入图片描述
这里有两个很重要的文件file_manager_json.ashxupload_json.ashx,他们用来负责处理客户端的文件上传请求。bin目录中有个LitJSON.dll类库,用来对对象进行序列化和反序列化操作。

将KindEditor引用到项目中

引用时直接将KindEditor下载得到的文件夹直接复制到自己的ASP.NET项目中即可。
在这里插入图片描述
然后在在项目中进行引用
在这里插入图片描述

初始化KindEditor

在这里插入图片描述
1.首先在script中初始化编辑器
在这里插入图片描述

<script type="text/javascript"> 
        KindEditor.ready(
            function (K) {
                editor = K.create('#content1', {
                    //上传处理程序的路径
                    uploadJson: 'kindeditor/asp.net/upload_json.ashx',
                    imageSizeLimit: '10MB', //批量上传图片单张最大容量
                    imageUploadLimit: 30, //批量上传图片同时上传最多个数
                    //文件管理处理程序的路径
                    fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
                    allowFileManager: true,
                    //要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框
                    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();
                        });
                    },
                    //上传后执行的回调函数,获取上传图片的路径
                    afterUpload: function (data) {
                        alert(data);
                    },
                    //同时设置这里  
                    afterBlur: function () {
                        this.sync();
                    },
                    width: '1000px;',
                    height: '500px;',
                    //编辑工具栏
                    items: [
                        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                        'anchor', 'link', 'unlink', '|', 'about'
                    ]
                });
            });
    </script> 
<!--富文本编辑器配置↑--> 

2.其次在body中调用

<body>
    <form id="form1" runat="server">
       <div class="divcontent">
     <div id="title" style="position:relative;padding-bottom:20px"> 
                                标题:<asp:TextBox ID="biaoti" runat="server" Font-Size="Larger" Font-Bold="True" Width="512px"></asp:TextBox>
                                作者:<asp:TextBox ID="zuozhe" runat="server" Font-Size="Larger" Font-Bold="True" Width="200px"></asp:TextBox>
                            </div>
                            <textarea id="content1" cols="100" rows="8" style="width: 800px; height: 600px; visibility: hidden;" runat="server"></textarea>
                        </div>
        <div class="divfooter">
      <asp:Button ID="cancel" runat="server" Text="取消编辑" />
      <asp:Button ID="save" runat="server" Text="保存文档" OnClick="save_Click" />

        </div>
    </form>
</body>

3.到这里页面已经可以显示KindEditor的编辑器界面啦。
在这里插入图片描述
4.可能有的小伙伴会遇到图片上传不了,或者路径不对什么的,记得自己修改一下文件的存储路径啦。
在这里插入图片描述
5.更多的使用方法去看一下官方的开发文档,里面有更详细的教程。

最后提醒一下,记得引用LitJSON.dll这个类库,前面忘记讲了
在这里插入图片描述

标签:function,ASP,KindEditor,ashx,NET,上传
来源: https://blog.csdn.net/m0_52240489/article/details/116719430

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有