KindEditor/添加自定义插件

来源：互联网发布：贵州大数据发展编辑：程序博客网时间：2024/06/03 22:06

添加"你好"插件

1、定义KE.lang['hello'] = "你好"。

    KE.lang['hello'] = "您好";

2、定义KE.plugin['hello']，所有逻辑都在这个对象里，点击图标时默认执行click方法。

    KE.plugin['hello'] = {        click : function(id) {            alert("您好");        }    };

3、页面里添加图标定义CSS。

    .ke-icon-hello {          background-image: url(./skins/default.gif);          background-position: 0px -672px;          width: 16px;          height: 16px;    }

4、最后调用编辑器时items数组里添加hello。

    KE.show({        id : 'content1',        items : ['hello']    });

完整代码：

<!doctype html><html>        <head>                <meta charset="utf-8" />                <title>Hello</title>                <style>                        .ke-icon-hello {                                background-image: url(../skins/default/default.gif);                                background-position: 0px -672px;                                width: 16px;                                height: 16px;                        }                </style>                <link rel="stylesheet" href="../themes/default/default.css" />                <script charset="utf-8" src="../kindeditor.js"></script>                <script charset="utf-8" src="../lang/zh_CN.js"></script>                <script>                        KindEditor.lang({                                hello : '你好'                        });                        KindEditor.ready(function(K) {                                K.create('#id', {                                        items : ['hello']                                });                        });                </script>        </head>        <body>                <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>        </body></html>

添加插入远程图片的插件

1、定义KE.lang['remote_image'] = "插入远程图片"。

KE.lang['remote_image'] = "插入远程图片";

2、定义KE.plugin['remote_image']。

KE.plugin['remote_image'] = {    click : function(id) {        KE.util.selection(id);        var dialog = new KE.dialog({            id : id,            cmd : 'remote_image',            width : 310,            height : 90,            title : KE.lang['image'],            yesButton : KE.lang['yes'],            noButton : KE.lang['no']        });        dialog.show();    },    check : function(id) {        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);        var url = KE.$('url', dialogDoc).value;        var title = KE.$('imgTitle', dialogDoc).value;        var width = KE.$('imgWidth', dialogDoc).value;        var height = KE.$('imgHeight', dialogDoc).value;        var border = KE.$('imgBorder', dialogDoc).value;        if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) {            alert(KE.lang['invalidImg']);            window.focus();            KE.g[id].yesButton.focus();            return false;        }        if (width.match(/^\d+$/) == null) {            alert(KE.lang['invalidWidth']);            window.focus();            KE.g[id].yesButton.focus();            return false;        }        if (height.match(/^\d+$/) == null) {            alert(KE.lang['invalidHeight']);            window.focus();            KE.g[id].yesButton.focus();            return false;        }        if (border.match(/^\d+$/) == null) {            alert(KE.lang['invalidBorder']);            window.focus();            KE.g[id].yesButton.focus();            return false;        }        return true;    },    exec : function(id) {        KE.util.select(id);        var iframeDoc = KE.g[id].iframeDoc;        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);        if (!this.check(id)) return false;        var url = KE.$('url', dialogDoc).value;        var title = KE.$('imgTitle', dialogDoc).value;        var width = KE.$('imgWidth', dialogDoc).value;        var height = KE.$('imgHeight', dialogDoc).value;        var border = KE.$('imgBorder', dialogDoc).value;        this.insert(id, url, title, width, height, border);    },    insert : function(id, url, title, width, height, border) {        var html = '<img src="' + url + '" ';        if (width > 0) html += 'width="' + width + '" ';        if (height > 0) html += 'height="' + height + '" ';        if (title) html += 'title="' + title + '" ';        html += 'alt="' + title + '" ';        html += 'border="' + border + '" />';        KE.util.insertHtml(id, html);        KE.layout.hide(id);        KE.util.focus(id);    }};

3、页面里添加图标定义CSS。

.ke-icon-remote_image {      background-image: url(./skins/default.gif);      background-position: 0px -496px;      width: 16px;      height: 16px;}

4、最后调用编辑器时items数组里添加remote_image。

KE.show({    id : 'content1',    items : ['remote_image']});

参考来源

http://www.kindsoft.net/doc.php

阅读全文

0 0