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

ueditor 版本:1.4.3.3 PHP utf-8版


按钮的添加

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

ueditor工具栏按钮的添加、隐藏_第1张图片
添加btn

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

ueditor工具栏按钮的添加、隐藏_第2张图片
首行显示

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

ueditor工具栏按钮的添加、隐藏_第3张图片
悬停的提示

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

右侧、图标

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

ueditor工具栏按钮的添加、隐藏_第4张图片
配置文件引入

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

ueditor工具栏按钮的添加、隐藏_第5张图片
效果

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

ueditor工具栏按钮的添加、隐藏_第6张图片
点击控制显示

控制工具条的隐藏与显示

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

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

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

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

定义隐藏样式

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

竖分割线
ueditor工具栏按钮的添加、隐藏_第7张图片
按钮
ueditor工具栏按钮的添加、隐藏_第8张图片
其他功能

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

js显示

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

ueditor工具栏按钮的添加、隐藏_第9张图片
大功告成

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

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

你可能感兴趣的:(ueditor工具栏按钮的添加、隐藏)