KindEditor/添加自定义插件

最新推荐文章于 2022-05-25 10:22:51 发布

dxx707099957

最新推荐文章于 2022-05-25 10:22:51 发布

阅读量1.8k

点赞数

分类专栏： kindeditor

kindeditor 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加"你好"插件

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

dxx707099957

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KindEditor/添加自定义插件

添加"你好"插件1、定义KE.lang['hello'] = "你好"。 KE.lang['hello'] = "您好";2、定义KE.plugin['hello']，所有逻辑都在这个对象里，点击图标时默认执行click方法。 KE.plugin['hello'] = { click : function(id) { a
复制链接

扫一扫