Ueditor试炼之修改toolbar按钮

上篇文章讲了如何修改ueditor的上传图片功能,不过正所谓温饱思淫欲,基础功能都搞定了之后,对于ui就有了新的追求,下面原生的ueditor还是有一些简陋的,icon啊配色啊都不够新颖。

Ueditor试炼之修改toolbar按钮_第1张图片

所以才想把这些toolbar上的icon都换掉,

Ueditor试炼之修改toolbar按钮_第2张图片

上面就是微信公众平台的编辑器样子,上面有一些是微信自己开发的功能,原生的ueditor不具备,下面是最终的效果。

Ueditor试炼之修改toolbar按钮_第3张图片


检查元素后发现,button的样式都在/themes/default/css/button.css和buttonicon.css中,这些icon肯定是css精灵图,所以把button.css的第二行注释掉,换成自己的精灵图,可以去微信公众平台扒一个。

Ueditor试炼之修改toolbar按钮_第4张图片

然后buttonicon.css里面放置的都是每个icon的background-position把这些也都换成自己的就行了。

最后还需要改一下ueditor.config.js


把toolbar上的icon改的少一些简洁一些,留下最基础的几个功能就可以了

你可能感兴趣的:(Ueditor试炼之修改toolbar按钮)