KindEditor 编辑器

GitHub 项目地址 官方地址

引用

<script src="https://cdn.jsdelivr.net/gh/kindsoft/kindeditor/kindeditor-all-min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kindsoft/kindeditor/lang/zh-CN.js"></script>

HTML

<textarea id="editor_id" name="content"></textarea>

示例

<script type="text/javascript">
KindEditor.ready(function(K) {
    window.editor = K.create('#editor_id');
});
</script>

自定义插件 save 保存按钮

设置 items 项

window.editor = K.create('#editor_id', {
    items : [
        'save', '|', 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about', '|', 'fullscreen', '|',
    ],
});

鼠标移动上面显示语言用 KindEditor.lang 设置

KindEditor.lang({
    save : '保存'
});

设置风格图片

.ke-icon-save {
    background-image: url(save.jpg);
    width: 16px;
    height: 16px;
}

添加点击事件代码

KindEditor.plugin('save', function(K) {
    var self = this, name = 'save';
    self.clickToolbar(name, function() {
          // 点击执行
    });
});

自适应容器宽度、高度

在 create 的时候设置容器宽度和高度，然后添加 window.onresize 事件

window.onresize = function() {
    window.editor.resize("100%", document.height);
}

常用函数

html() 取得编辑器的HTML内容。
html(val) 设置编辑器的HTML内容。
text() 取得编辑器的纯文本内容。(包含img和embed)
text(val) 设置编辑器的内容，直接显示HTML代码。
remove() 移除编辑器。

转载请注明出处：吖Go博客 » KindEditor 编辑器