Ueditor 百度编辑器增加插入无广告的优酷视频按钮教程
第一步：修改ueditor.config.js文件
在ueditor.config.js文件中，找到toolbars参数，增加一个“addyouku”字符串，对应着添加一个labelMap，用于鼠标移上按钮时的提示。
toolbars: [ [..., 'searchreplace', 'help', 'addyouku']]
,labelMap: {
'anchor': '',
'undo': '',
'addyouku': '插入无广告优酷视频'}
|
第二步：修改ueditor.all.js文件
在ueditor.all.js文件中，找到的btnCmds数组变量，在其中同样增加一个"addyouku"字符串。
var btnCmds = [..., 'mergecells', 'deletetable', 'addyouku'];
|
这时候刷新你的百度编辑器页面,就看到了按钮!
第三步：修改themes/default/css/ueditor.css文件
由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。
找到themes/default/css/ueditor.css文件，增加一条样式定义。此处的样式定义了addyouku图标在UEditor默认的Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
把下载的压缩包里的icons.png,复制到themes/default/images/ 文件夹,然后css里面加入
.edui-for-addyouku .edui-icon {
background-position: -659px -76px;
}.edui-default .edui-for-addyouku .edui-dialog-content {
width: 560px;
height: 270px;
overflow: hidden;
} |
然后清除浏览器缓存,再刷新页面看看
第四步：添加ueditor.all.js插件文件
到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
下面我们就来定义该方法的具体内容： 找到ueditor.all.js文件，然后在该文件中搜索如下代码：
搜索
'insertvideo':'~/dialogs/video/video.html',
在下面加入
'addyouku':'~/dialogs/addyouku/addyouku.html',
搜索 var dialogBtns = {
里面增加 ,'addyouku'
然后把压缩包里面的addyouku文件夹复制到 dialogs\目录下!
基本就完成了!
截个图试试