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,valueuploadPasteImg(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,valueuploadPasteImg(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富文本编辑器的使用相关推荐

学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
kindEditor 富文本编辑器使用介绍
第一版:存放位置: ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <s ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...

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

js引入kindeditor富文本编辑器的使用相关推荐

最新文章

热门文章