UEditor 百度编辑器工具栏新增自定义按钮及功能

MuGuiLin

已于 2024-12-09 22:30:12 修改

阅读量5k

点赞数 5

分类专栏：在线编辑器文章标签： UEditor添加按扭 UEditor二次开发百度编辑器富文本编辑器编辑器工具栏新增按扭微信编辑器在线编辑器

于 2020-04-20 20:28:19 首次发布

本文链接：https://blog.youkuaiyun.com/muguli2008/article/details/105639221

版权

在线编辑器专栏收录该内容

2 篇文章

订阅专栏

由于项目中用到了强大的UEditor富文本在线编辑器，因项目相关功能需求，而在UEditor编辑器原有的功能插件中没有我们想要的功能，所以就要在UEditor中新增一个(多个方法也一样)按扭并添加相应的功能。

经使用以后总结，大概有如下两种实现方法。

写在前面：

UEditor下载地址：http://ueditor.baidu.com/website/download.html

UEditor官方文档：FEX - FEX

UEditor二次封装：原UEditor(百度编辑器) 二次开发 (微信公众号图文编辑器)

二次封装GitHub原码：MuGuiLin/wxEditor: 微信编辑器，微信排版，微信公众号编辑器，微信素材，前后端已搭建完整，原UEditor(百度编辑器，PHP1.4.3版) 二次开发 (微信编辑器，微信公众号，图文发布在线编辑器) 。

这里以UEditor v1.4.3.3 PHP UTF-8版版本为例，以下是代码功能模块目录结构：

注：由于刚下载下来的UEditor编辑器在index.html中，默认引用的是压缩过的 ueditor.all.min.js，为了便于修改和重构，我们将引用ueditor.all.js，它们的功能是完全一样的。

将：
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

改为：
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>

在浏览器中打开index.html文件，效果如下：

由于UEditor编辑器的相关媒体素材上传功能需要后端的支特，所以要在对应（Php、Jsp、Asp）的服务环境中运行，为了演示我这里是直接在本地打开的，所以在控制台中会有报错，不过这不会影响我们这次添加自定义按扭的功能【如果要正式上线用一定要配置好后端服务器环境哦】。

实现方式一（在外部js文件中新增自定义按扭）：

1、在index.html入口文件中添加以下代码，为了便于理解，这里用newbtn为命名

新增按扭JS代码如下：

  // 往UEditor编辑头部工具栏中添加一个自定义名为 newbtn 的功能按扭
        
        UE.registerUI('newbtn', function (editor, uiName) {

            return new UE.ui.Button({
                name: uiName,
                title: '我是新增按扭的提示文字',  // 这里是设置当鼠标指向这个按扭时显示的文字
                onclick: function () {

                    alert('我是新增按扭在被点击时执行的方法，在这里可以编写你想要实现的功能哦！');
                }
            });

        }, [1, ['editor']]);

新增按扭代码后以效果如下：

OK 这样就在UEditor编辑器的工具栏上新添加了一个自定义的按扭。

鼠标指向该按扭：会显示上面之前在title:属性中设置文字提示！

鼠标点击该按扭：还会弹出之前在onclick 回调函数中 alert() 的文字信息！

怎么样简单吧！

2、修改新增按扭的icon图标（由于UEditor编辑器工具栏的 icon图标中 B 是排在最左上角的，所以默认就显示了B样式的icon）,

这个icons.png的图片路径在 themes / default / images 目录中！

要给我们刚新添加的这个按扭换icon有两种方式：

2.1、在原有的icons.png图片中添加一个icon，可用PS等设计软件实现，然后打开themes / default / css 目录下的 ueditor.css 样式文件，添加一个和新增按扭时设置的名字一样的类名，所以这里就用 .edui-for-newbtn 。

效果如下：

2.2、单独用一个icon图片来显示，做法和上面相似：

a、先设计好、或找好icon图片，存放到 themes / default / images目录中，名字最好和对应的按扭名相同，所以这里就用newbtn。

b、打开themes / default / css 目录下的 ueditor.css 样式文件，添加和新增按扭名对应的样式类。

修改新增按扭icon图标CSS样式代码：

/* 注：类名一定要和新增按扭时配置的名字一样 */
.edui-default .edui-for-newbtn .edui-icon {

    /* 这里就根据你设置好icon的位置进行调整 */
    /* background-position: -60px -20px;  */


    /* 注：这里独立的一张icon图片(不是在icons.png CSS雪碧图图中的哦！) */
    background: url("../images/newbtn.png") no-repeat center !important;
    background-size: 16px auto;
}

实现方式二（在编辑器原码中新增自定义按扭）：

1、先打开ueditor.config.js文件，找到 toolbars 数组变量，在数组的最后添加一个自定义按扭名（注：这里的顺序根显示的顺序是相关的，因为ueditor编辑器是正向遍历头部工具样按扭的，在toolbars数组的最后添加，在头部工具栏中也是在最后显示），为了便于理解，这里用newbtn为命名：