ueditor 工具栏配置_ueditor工具栏按钮的添加、隐藏

ueditor 版本：1.4.3.3 PHP utf-8版

按钮的添加

一、ueditor.all.js文件里搜索  btnCmds，添加一个btn ，changeeditor

添加btn

二、ueditor.all.js文件里搜索 toolbaritem，让这个btn与全屏fullscreen一同放在首行

首行显示

三、修改鼠标悬停的提示文字，位于语言文件下zh-cn.js和en.js

悬停的提示

四、设置显示图标样式，在ueditor.css中修改

右侧、图标

五、在ueditor.config.js中引入这个btn

配置文件引入

这样，这个按钮就添加完成了，效果下图所示

效果

现在这个按钮还没有任何的点击事件，我准备用它来控制 除他和fullscreen以外按钮的隐藏和显示，这样页面显得更加美观。类似这样

点击控制显示

控制工具条的隐藏与显示

原本我的想法是，首次加载时只传入 changeeditor 和 fullscreen，然后点击changeeditor后destroy这个编辑器，然后再加载这个编辑器，传入所有的按钮。

首先，这个想法我是实现了，但是遇到了一些蜜汁bug，得出一个结论：修改源码+多次加载导致编辑器很不稳定，出现很多未知的错误。于是我又有了第二种想法。

既然重复加载有问题，那么我就让按钮全部加载，然后把除了changeeditor 和 fullscreen 的按钮全部隐藏，用changeeditor控制显示隐藏，这样就没有加载问题了。说干就干。

一、ueditor.css中，定义隐藏的class css样式，命名为 e-hide，注意放到最后

定义隐藏样式

二、编辑器的html内容都是js生成的，为了让编辑器加载后图标处于隐藏状态，就要让btn都加上e-hide，修改ueditor.all.js

竖分割线

按钮

其他功能

三、这样有个问题，就是所有的图标都会隐藏，包括changeeditor 和 fullscreen ，当然了可以继续修改源码，加入判断。。。但是我比较懒。。。(有大神做出来了，请联系我！)所以就页面中直接用js判断，去除了e-hide

js显示

四、然后就是监听changeeditor的事件，判断是否显示

大功告成

好了，到这里按钮的添加和功能都已经实现了，当然我这个方法可能会有很多漏洞，具体漏洞是什么，我也不知道。。哈哈。。

另外，我也实现了ueditor的图片上传到独立的服务器，静态服务器，这里就不写了，因为，我就不告诉你！