富文本编辑器 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

<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的value
    editor.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的value
        editor.sync();
        // KindEditor Node API
        html = 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内容，光标放到内容中间

点击添加表格、添加图片

 

可看到表格和图片增加到了当前光标处。