插件图标无法加载。。

[hulang]

插件名称：wx 代码

/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('wx', function (K) {
    var self = this;
    var name = 'wx';
    function click(value) {
        self.insertHtml(value);
        self.select();
        self.hideMenu();
    }
    self.clickToolbar(name, function () {
        var menu = self.createMenu({
            name: name,
            width: 120
        });
        menu.addItem({
            title: '[微信]',
            click: function () {
                click('[微信]');
            }
        });
        menu.addItem({
            title: '[昵称]',
            click: function () {
                click('[昵称]');
            }
        });
        menu.addItem({
            title: '[电话]',
            click: function () {
                click('[电话]');
            }
        });
        menu.addItem({
            title: '[二维码]',
            click: function () {
                click('[二维码]');
            }
        });
        menu.addItem({
            title: '[性别]',
            click: function () {
                click('[性别]');
            }
        });
        menu.addItem({
            title: '[省份]',
            click: function () {
                click('[省份]');
            }
        });
        menu.addItem({
            title: '[城市]',
            click: function () {
                click('[城市]');
            }
        });
    });
});

lang里面增加

'wx' : '微信相关'

default.css文件里面增加

.ke-icon-wx {
    background-position: 0px -1072px;
    width: 16px;
    height: 16px;
}

在工具栏上面没有显示出来，但是鼠标经过那里的时候，显示：微信相关，也有插件里面的功能。

[hulang]

！！！！演示动画

[hulang]

还发现一个问题，就是我页面中已经使用了:webuploader，会冲突了。。。 我页面中的上传按钮都变成你蓝色的那个颜色的了还歪了。冲突后，批量上传界面中的：选择图片 按钮无法选择了。。不知道怎么处理了。。。 之前我使用：https://gitee.com/blackfox/Uploader，非常好用，代码简洁，但是我不会用，主要原因是，在我的后台页面中，点击一个按钮弹出后，他这个插件，没有一个遮住页面的层，导致，可以无限点击按钮，进行无限弹出上传界面。。后来直接用webuploader了。。。

[mHalo]

！！！！演示动画

新增插件的图标在toolbar显示时，是以 span.ke-icon-[插件标识]存在的，所以对于自定义的图标，需要定义对应的样式： .ke-icon-wx{ //图标样式 }

mhalo.kindeditor中toolbar图标使用的是iconfont，不论是图片形式的图标还是iconfont形式的图标，都是css样式定义，定义一个样式即可。

[mHalo]

还发现一个问题，就是我页面中已经使用了:webuploader，会冲突了。。。 我页面中的上传按钮都变成你蓝色的那个颜色的了还歪了。冲突后，批量上传界面中的：选择图片 按钮无法选择了。。不知道怎么处理了。。。 之前我使用：https://gitee.com/blackfox/Uploader，非常好用，代码简洁，但是我不会用，主要原因是，在我的后台页面中，点击一个按钮弹出后，他这个插件，没有一个遮住页面的层，导致，可以无限点击按钮，进行无限弹出上传界面。。后来直接用webuploader了。。。

页面中存在其他上传操作时，建议直接使用kindeditor的上传，不要再次引用webuploader

document.getElementById("someBtn").addEventListener('click', function(){
    var ieditor = KindEditor.editor({
        allowImageUpload: true,
        formatUploadUrl: false,
        uploadJson: '/handler/upload-test',
        //其它关于upload的配置
    });
    ieditor.loadPlugin('image', function () {
        ieditor.plugin.imageDialog({
            showRemote: false,
            clickFn: function (url, title, width, height, border, align) {
                // # do something with url
                // document.getElementById("inputBox").value = url
                // # hide upload-dialog
                ieditor.hideDialog();
            }
        });
    });
})

使用方法可参考：

1. ImageDialog
2. MultiImageDialog
3. UploadButton (由于上传组件改成了webuploader，这种方式未测试过和原文档中的调用方法是否兼容，可以试下)