百度编辑器自定义插件

百度编辑器插件开发可以搜得到很多,也不麻烦,但实现一键给编辑器中所有的img标签加a链接(我们主要是为了添加一个属性占位符),选中单个图片去掉该属性,中间还是用了一些时间去研究的.

1.一键给所有的img加上a链接:

     在ueditor.config.js中搜索toolbars,在数组后边加上自己的插件名(这里插件名是addmy),在labelMap中写上自己的插件名的title,就是鼠标放上去提示的内容.然后在ueditor.all.js中加入插件要做什么事,也就是js代码,如下:

UE.commands['addmy'] = {
        execCommand : function(){
            var me = this;
            var content=this.getContent();
            var Re=/(<img[^>]*>)/gi;
            content=content.replace(Re,"<a href='<!!>'>$1</a>");
             me.setContent(content)
            return true;
        },
        queryCommandState:function(){
        
        }
    };

2.选中单个图片去掉该属性

    ueditor.config.js中的操作跟上一个相同,ueditor.all.js中代码如下:

UE.commands['removea'] = {
        execCommand : function(){
            var me = this;
            var range = me.selection.getRange().getClosedNode().parentNode;//获取选中的图片的父元素,即上一个插件加的a链接
            var img = me.selection.getRange().getClosedNode();//获取图片
            range.removeAttribute('href');//移除属性
            return true;
        },
        queryCommandState:function(){
        
        }
    };

提示:1.要确保引入的是这两个js文件;2.如果在config中设置的labelname发现不起效,那可能是在你用到的页面重新实例化了,在页面里实例化内容加上;3.不设置图标默认使用加粗图标,如果使用自定义图标,在themes/default/css/ueditor.css文件中下边加代码:

.edui-default .edui-toolbar .edui-for-addmy .edui-icon {
    background-image: url("../images/addmy.png");
}

注意.edui-for-addmy中addmy是自定义插件名,url就是你的图片路径了,使用百度编辑器自定义的图标就在文件中上加css代码如下:

.edui-default .edui-toolbar .edui-for-addmy .edui-icon {
           background-position: -600px -40px;
        }

当然位移看自己需求,要注意页面引入改css文件,也可以直接写在使用的页面上;4.刚开是本来要加a链接自定义属性名,data-url,但发现加不上,编辑器里边写代码也保存不上,后边查到了在ueditor.config.js中有设置每个标签允许的属性,可以搜索whitList,就可以看到,在白名单里加上需要的属性就好了;5.还有一点,有的时候浏览器设置问题,改了之后页面不显示强制刷新都不行,只能清缓存才看得到....反正自己遇到过好几次.