美文网首页
ueditor工具栏按钮的添加、隐藏

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

作者: Sylar丶 | 来源:发表于2017-12-22 10:21 被阅读0次

    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的图片上传到独立的服务器,静态服务器,这里就不写了,因为,我就不告诉你!

    相关文章

      网友评论

          本文标题:ueditor工具栏按钮的添加、隐藏

          本文链接:https://www.haomeiwen.com/subject/aihtgxtx.html