kindeditor富文本编辑器忘记什么时候添加到项目中了，最近做一个功能需要在原有编辑器上自定义添加一些固定内容，于是对着编辑器文档研究了一番，在这里做一个使用方式整理。
1.下载kindeditor
下载地址如下：
/kindsoft/kindeditor/releases/download/v4.1.11/kindeditor-4.1.11-zh-CN.zip
2.部署编辑器
解压下载安装包
把富文本所有文件放在你的网站根目录或静态文件的位置。
3.查看demo
查看php demo效果，发现没有效果。
修改kindeditor/php/demo.php
<script charset="utf-8" src="../kindeditor.js"></script>
改为：
<script charset="utf-8" src="../kindeditor-all.js"></script>
4.创建编辑器
添加textarea输入框
<textarea id="editor_id" name="content" style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>
添加js脚本
<script charset="utf-8" src="./kindeditor/kindeditor-all.js"></script><script charset="utf-8" src="./kindeditor/lang/zh-CN.js"></script><script>KindEditor.ready(function (K) {window.editor = K.create('#editor_id');});</script>
5.修改编辑器
设置编辑器高度、宽度、不可拖动
// 创建编辑器KindEditor.ready(function (K) {window.editor = K.create('#editor_id', {width:'800px',height:'800px',resizeType:0,});});
属性有很多，这里只是举例。参数列表可查看文档
KindEditor 4.x Documentation
6.获取html
增加按钮和点击事件
<button onclick="getContent()">获取html</button>
增加js脚本
// 获取编辑器html内容function getContent() {// 取得HTML内容html = editor.html();// 同步数据后可以直接取得textarea的valueeditor.sync();html = document.getElementById('editor_id').value;// 设置HTML内容//editor.html('HTML内容');console.log(html)}
效果
7.弹出框
增加弹出框操作按钮
<button id="popup">弹窗</button>
增加弹出框脚本
// 创建编辑器KindEditor.ready(function (K) {window.editor = K.create('#editor_id', {width:'800px',height:'400px',resizeType:0,});// 弹出框K('#popup').click(function() {// 取得HTML内容html = editor.html();// 同步数据后可以直接取得textarea的valueeditor.sync();// KindEditor Node APIhtml = K('#editor_id').val();let dialog = K.dialog({width : 500,title : '测试窗口',body : '<div>' + html + '</div>',closeBtn : {name : '关闭',click : function(e) {dialog.remove();}},yesBtn : {name : '确定',click : function(e) {alert(this.value);}},noBtn : {name : '取消',click : function(e) {dialog.remove();}}});});});
效果
8.多语言
Html内容
<select name="lang"><option value="en">English</option><option value="zh-CN">简体中文</option><option value="zh-TW">繁體中文</option><option value="ko">Korean</option><option value="ar">Arabic</option></select><textarea id="editor_id" name="content" style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>
多语言脚本
// 创建编辑器KindEditor.ready(function (K) {// 多语言K('select[name=lang]').change(function() {if (window.editor) {window.editor.remove();window.editor = null;}window.editor = K.create('#editor_id', {langType : this.value});});K('select[name=lang]').change();});
效果
9.自定义插入内容
自定义插入内容，并非是在原有表单上增加，而是通过编辑器insertHtml属性，另外点击按钮或者其他元素来向编辑器当前光标添加内容
Html内容
<textarea id="editor_id" name="content" style="width:700px;height:300px;"><strong>HTML内容</strong></textarea><button onclick="getContent()">获取html</button><button id="popup">弹窗</button><button id="addtable">添加表格</button><button id="addimg">添加图片</button>
脚本设置
// 创建编辑器KindEditor.ready(function (K) {window.editor = K.create('#editor_id', {width:'700px',height:'200px',resizeType:0,});K("#addtable").click(function(){K.insertHtml('#editor_id', '<table style="width:100%;" cellspacing="0" cellpadding="2" bordercolor="#000000" border="1">\n' +'\t<tbody>\n' +'\t\t<tr>\n' +'\t\t\t<td>\n' +'\t\t\t\tID<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t名称<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t性别<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t爱好<br />\n' +'\t\t\t</td>\n' +'\t\t</tr>\n' +'\t\t<tr>\n' +'\t\t\t<td>\n' +'\t\t\t\t1<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t张三<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t男<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t喜欢打篮球<br />\n' +'\t\t\t</td>\n' +'\t\t</tr>\n' +'\t\t<tr>\n' +'\t\t\t<td>\n' +'\t\t\t\t2<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t李四<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t女<br />\n' +'\t\t\t</td>\n' +'\t\t\t<td>\n' +'\t\t\t\t喜欢偶像剧<br />\n' +'\t\t\t</td>\n' +'\t\t</tr>\n' +'\t</tbody>\n' +'</table>');});K("#addimg").click(function () {K.insertHtml('#editor_id', '<img src="./images/test1.png" alt=""/>');});});
效果
设置好html内容，光标放到内容中间
点击添加表格、添加图片
可看到表格和图片增加到了当前光标处。
