1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。
2. 修改html文件,在页面引入js文件:
<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="./kindeditor/lang/zh-CN.js"></script>
3.在需要显示编辑器的位置添加textarea输入框,这里以一个页面创建两个编辑器为例:
注意:后面kindeditor是根据html标签的id或class来初始化的,所以id或class一定要是唯一的,否则只在第一个textarea标签上创建重复的kindeditor
<textarea class="keditor1" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
<textarea> class="keditor2" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
4.初始化kindeditor编辑器:
参考网上大部分的写法是:
var editor1;
KindEditor.ready(function(K) {
editor = K.create('.keditor1', {});
});
var editor2;
KindEditor.ready(function(K) {
editor = K.create('.keditor2', {});
});
但是我用这种方法不能进入kindEditor.ready方法,无法成功创建初始化。
最后:
// 初始化
var editor1 = KindEditor.create('.keditor1',keditOptions(KindEditor));
var editor2 = KindEditor.create('.keditor2',keditOptions(KindEditor));
pasteImg(editor2.edit.doc, editor2, KindEditor);
changeKE(editor2);
5.配置项
// 富文本编辑器配置项
function keditOptions(KindEditor){
return{
minHeight: 50,
filterMode: false, //true时根据 htmlTags 过滤HTML代码,false时允许输入任何代码。
resizeType : 0, //2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。
themeType : 'simple', //指定主题风格,可设置”default”、”simple”
items : ['emoticons', 'image'],
autoHeightMode: true, // 引入autoheight.js插件时自动调整高度
readonlyMode : true,
// useContextmenu : false,
pasteType: 1, // 设置粘贴类型,0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
cssData: 'body, td {color:#333;font:14px/1.5 "Microsoft Yahei",tahoma,verdana,helvetica;}', // 编辑器字体样式
// 多个标签元素
cssData: 'body, td {overflow: hidden;padding: 0;color:#333;font:14px/1.5 "Microsoft Yahei",tahoma,verdana,helvetica;} p {margin-top:0;}', // 编辑器字体样式
afterChange : function () { //输入文字事件
var thisEditor = this;
setTimeout(function () {
var autoheight = KindEditor.IE ? thisEditor.edit.doc.body.scrollHeight : thisEditor.edit.doc.body.offsetHeight; //判断是否是IE,并获取内容高度
thisEditor.edit.setHeight(autoheight); //设置高度
}, 1000);
},
afterCreate:function(){
this.sync();
},
afterBlur: function(){
this.sync();
}
}
}
6.图片粘贴参考文档:https://blog.csdn.net/sinat_36521655/article/details/105393820
kindeditor粘贴图片时base64格式,字符太长,所以想改成粘贴时调用上传文件接口,保存接口返回的url地址。
图片粘贴兼容IE和谷歌浏览器
// 处理图片,粘贴后保存格式为带有url地址的img标签
function pasteImg(editerDoc, editor, KindEditor){
var thisEditerDoc = editerDoc;//得到编辑器的文档对象
var formData;
$(thisEditerDoc).bind('paste', null, function (e) {
// 谷歌浏览器
if(KindEditor.WEBKIT) {
// 获得操作系统剪切板里的项目,e即kindeditor,kindeditor创建了originalEvent(源事件)对象,并指向了浏览器的事件对象,
// chrome浏览器需要通过clipboardData(剪贴板数据)对象的items,获得复制的图片数据。
var ele = e.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//判断文件类型
if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
var file = ele[i].getAsFile();//得到二进制数据
//创建表单对象,建立name=value的表单数据。
formData = new FormData();
formData.append("file", file);//name,value
uploadPasteImg(formData, editor);
}
}
}
// IE浏览器或火狐浏览器
if(KindEditor.GECKO || KindEditor.IE) {
// IE粘贴板数据clipboardData在全局对象中,通过clipboardData对象的files获得复制的图片
var files = (window.clipboardData || event.clipboardData).files || [];
for (let i = 0; i < files.length; ++i) {
//判断文件类型
if (/^image\//.test(files[i].type)) {
//得到二进制数据,并上传
formData = new FormData();
formData.append("file", files[i], "image.png");//name,value
uploadPasteImg(formData, editor);
}
}
}
})
}
function uploadPasteImg(formData, editor) {
//用jquery Ajax 上传二进制数据
var fileUrl = ""; // 上传文件接口地址
ajaxApi(false, fileUrl, formData, "", function(data, isSuccess, resp) {
//上传完之后,生成图片标签回显图片
var src = fileDomain + data[0].original;
var imgTag = "<img src='" + src + "' border='0' style='max-width:592px'/>";
editor.insertHtml(imgTag);
},{
contentType: false,
processData: false,
error : function(jqXHR, textStatus, errorThrown) {
layer.alert("文件上传失败:"+jqXHR.status, {
icon : 2,
shade : 0.1
});
}
});
}
// 富文本编辑器可编辑
function changeKE(editor){
editor.readonly(false); // 取消只读
}