▷ 富文本编辑器 kindeditor 使用整理
kindeditor富文本编辑器忘记什么时候添加到项目中了，最近做一个功能需要在原有编辑器上自定义添加一些固定内容，于是对着编辑器文档研究了一番，在这里做一个使用方式整理。
1.下载kindeditor
下载地址如下：
https://github.com/kindsoft/kindeditor/releases/download/v4.1.11/kindeditor-4.1.11-zh-CN.zip
2.部署编辑器
解压下载安装包
把富文本所有文件放在你的网站根目录或静态文件的位置。
3.查看demo
查看php demo效果，发现没有效果。
修改kindeditor/php/demo.php
改为：
4.创建编辑器
添加textarea输入框
添加js脚本
5.修改编辑器
设置编辑器高度、宽度、不可拖动
// 创建编辑器
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width:'800px',
height:'800px',
resizeType:0,
});
});
属性有很多，这里只是举例。参数列表可查看文档
KindEditor 4.x Documentation
6.获取html
增加按钮和点击事件
增加js脚本
// 获取编辑器html内容
function getContent() {
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value;
// 设置HTML内容
//editor.html('HTML内容');
console.log(html)
}
效果
7.弹出框
增加弹出框操作按钮
增加弹出框脚本
// 创建编辑器
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的value
editor.sync();
// KindEditor Node API
html = K('#editor_id').val();
let dialog = K.dialog({
width : 500,
title : '测试窗口',
body : '
closeBtn : {
name : '关闭',
click : function(e) {
dialog.remove();
}
},
yesBtn : {
name : '确定',
click : function(e) {
alert(this.value);
}
},
noBtn : {
name : '取消',
click : function(e) {
dialog.remove();
}
}
});
});
});
效果
8.多语言
Html内容
多语言脚本
// 创建编辑器
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内容
脚本设置
// 创建编辑器
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width:'700px',
height:'200px',
resizeType:0,
});
K("#addtable").click(function(){
K.insertHtml('#editor_id', '
| \n' +
'\t\t\t\tID '\t\t\t | \n' +
\n' +
'\t\t\t\t名称 '\t\t\t | \n' +
\n' +
'\t\t\t\t性别 '\t\t\t | \n' +
\n' +
'\t\t\t\t爱好 '\t\t\t | \n' +
| \n' +
'\t\t\t\t1 '\t\t\t | \n' +
\n' +
'\t\t\t\t张三 '\t\t\t | \n' +
\n' +
'\t\t\t\t男 '\t\t\t | \n' +
\n' +
'\t\t\t\t喜欢打篮球 '\t\t\t | \n' +
| \n' +
'\t\t\t\t2 '\t\t\t | \n' +
\n' +
'\t\t\t\t李四 '\t\t\t | \n' +
\n' +
'\t\t\t\t女 '\t\t\t | \n' +
\n' +
'\t\t\t\t喜欢偶像剧 '\t\t\t | \n' +
});
K("#addimg").click(function () {
K.insertHtml('#editor_id', '
');
});
});
效果
设置好html内容，光标放到内容中间
点击添加表格、添加图片
可看到表格和图片增加到了当前光标处。