首先打开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这个类库,前面忘记讲了