关闭搜索(ESC)
搜索标签:

ueditor+七牛组合上传图片

2015-04-09 浏览:1160 标签: ueditor js

描述

在做项目的时候,用到了ueditor,然后图片是需要上传到七牛的,所以,需要配置ueditor,将图片上传功能去掉。
前提是,用到了七牛的js上传插件 qiniu-sdk,以及自己设计的弹窗

弹窗

开始

首先打开ueditor.config.js,看到配置选项toolbars,添加一个自定义。比如wbbaddimage

config

然后打开ueditor.all.js,查找btnCmds,添加你自定义的按钮名wbbaddimage

addcmd

现在刷新你的在线ueditor,可以看到你添加的按钮,当然,icon仍然是原来的,你还是需要改CSS。查看文件themes/default/css/ueditor.css,添加css:

/*by wbb*/
.edui-default  .edui-for-wbbaddimage .edui-icon {
    background-position: -380px 0px;
}

好了,现在你可以在浏览器上查看效果了,添加了一个图片按钮。但是没有事件响应了,现在要开始添加事件操作。

这个事件可以写在你的业务逻辑里。

_ethis._ue = UE.getEditor('ucontainer');
baidu.editor.commands['wbbaddimage'] = {
    execCommand: function() {
        _ethis._picmodal();
        return true;
    },
    queryCommandState: function() {}
};

_ethis._picmodal就是调用弹窗的函数。

当然,别忘了,先要不加载原服务器配置文件

/* 尝试异步加载后台配置 */
me.loadServerConfig();

把上面的代码注释掉。

结尾

ueditor做的蛮不错的,虽然感觉很复杂的,但是可定制性强。赞一个。

添加评论