js引入kindeditor富文本编辑器的使用

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;">
	&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>
			
<textarea> class="keditor2" name="content" style="width:700px;height:300px;">
	&lt;strong&gt;HTML内容&lt;/strong&gt;
</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); // 取消只读
}

js引入kindeditor富文本编辑器的使用

猜你喜欢