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\目录下!

 

基本就完成了!

 

截个图试试