ASP.NET开发之如何在ASP.NET中使用KindEditor编辑器
2021/5/12 20:25:22
本文主要是介绍ASP.NET开发之如何在ASP.NET中使用KindEditor编辑器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
首先打开KindEditor的官网下载最新版的kindEditor
下载完成后解压,目录结构如下
由于我们使用的是ASP.NET,所以打开ASP.NET文件夹
这里有两个很重要的文件file_manager_json.ashx和upload_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这个类库,前面忘记讲了
这篇关于ASP.NET开发之如何在ASP.NET中使用KindEditor编辑器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2022-03-01沐雪多租宝商城源码从.NetCore3.1升级到.Net6的步骤
- 2024-05-08首个适配Visual Studio平台的国产智能编程助手CodeGeeX正式上线!C#程序员必备效率神器!
- 2024-03-30C#设计模式之十六迭代器模式(Iterator Pattern)【行为型】
- 2024-03-29c# datetime tryparse
- 2024-02-21list find index c#
- 2024-01-24convert toint32 c#
- 2024-01-24Advanced .Net Debugging 1:你必须知道的调试工具
- 2024-01-24.NET集成IdGenerator生成分布式全局唯一ID
- 2024-01-23用CI/CD工具Vela部署Elasticsearch + C# 如何使用
- 2024-01-23.NET开源的简单、快速、强大的前后端分离后台权限管理系统