Ueditor和七牛云整合,工具栏添加上传图片到七牛云按钮

2019.10.11 - 宅先生

        自己最近捣鼓的项目,用到Ueditor写文章,要求图片资源上传到七牛云,所以需要实现Ueditor和七牛云的整合。

        效果演示

        ①工具栏自定义按钮,点击可打开七牛云媒体库弹窗。

        

        ②可从七牛云选择图片或者上传新图片,选中后点击“确定”按钮,这时候就可以看到图片添加到Ueditor编辑内容区域了。

        

        实现原理

            首先是添加自定义工具栏按钮,需要编写以下几步代码:

            ①启用自定义按钮:在ueditor.config.js配置中添加自定义的按钮名称,这里我取名为mymedia

        

        ②添加自定义按钮到ueditor,在ueditor.all.js中搜btnCmds

        ③添加自定义按钮的注释


        ④自定义按钮图片定义:注意看文件路径,ueditor.css,这里我复制了一下之前图片按钮的样式,这里说明一下,ueditor所有的工具栏按钮图片在一个png里面,默认都加上了background-image属性,所以我直接用了现成的图片,直接指定工具栏所处位置就好了。


        ⑤添加自定义按钮的相应js事件:在ueditor.all.js里面通过UE.commands['按钮名']添加按钮响应事件。这里说明一下,媒体库弹窗依赖layui.open(),没有采用Ueditor定制dialog的方式,所以这段代码并不通用,只是展示添加按钮事件的原理。


        以上,整个按钮的添加过程完毕。现在已经可以在ueditor上看到新定义的按钮了。

        至于后端打开媒体库选中以及上传资源到七牛云,这里不做表述了,感兴趣的同学可自行研究或与作者留言交流。

- END -

各位看官,如果你觉得文章不错,请鼓励鼓励吧~~

如何设置Ueditor工具栏浮动时,距离浏览器顶部的高度

我在使用Ueditor编辑器写文章时,发现当编辑区域到达一定高度的时候,工具栏会自动悬浮在浏览器顶部。但是由于我的管理后台存在固定高度的头部,所以啊,会出现部分工具栏被覆盖的情况。解决思路:设置编辑器,使得Ueditor工具栏浮动时,距离浏览器顶部具有一定的高度。

取消

您的支持,是我继续创作的动力!

扫码支持
人生百态皆无常,最是一颗感恩心

打开支付宝扫一扫,即可进行扫码打赏

所得打赏均用于域名续费、服务器租赁等维持平台正常运营的必要支出。

海报生成中...