尽管UEditor功能已经很强大了,但是有时候我们还是需要开发自己的插件,今天有时间就自己搞了下,发现还是挺简单的,有需要的童孩可以参考下,我使用的UEditor版本是1.4.3的,集成到java项目中得,如果有不知道怎么集成的童孩也可以参考我的博客CKEditor和UEditor的使用比较
先列出我引入ueditor插件在项目中的结构
第一步:找到ueditor文件夹下的ueditor.config.js下toolbars参数,新增一个字符串showmsg,同时新增一个labelMap用于鼠标移入显示自定义提示信息、
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
, toolbars: [[
......,print', 'preview', 'searchreplace', 'help'
//, 'drafts' 从草稿箱加载
//新增自定义按钮
,'showmsg'
]]
//自定义按钮鼠标移入提示
,labelMap:{
'showmsg':'显示提示信息'
}
第二步:找到ueditor文件夹下的ueditor.all.js
的btnCmds数组,添加字符串'showmsg'
这个时候刷新页面就可以在help按钮后面新增了一个按钮,但是按钮的图标显示的是B(默认的样式)
第三步:在显示出来按钮后,我们发现按钮的图标不是我们想要的,然后我们找到ueditor文件夹下的themes文件夹下的default文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如下css:
.edui-for-showmsg .edui-icon{
background-position:-200px -40px;
}
这时候再刷新页面就发现图标已经换掉了,这里要解释下就是图标都是使用
themes/default/images/icons.png这个图片文件通过偏移量来选择图标的,如果有自定义图标,只需要将制作好的图标加入到icons.png中,然后设置偏移量就可以了。
第四步:当我们点击按钮时发现没有反应,其实在第二步完成后ueditor已经为我们将这个按钮的点击事件绑定好了,只不过是这个点击方法是空的而已,现在就需要我们自己去重写这个点击方法了。首先在ueditor文件夹下定义一个myplugins的文件夹,然后新建一个showmsg.js文件,showmsg文件内容如下:
UE.commands['showmsg'] = {
execCommand : function(){
var imgs = this.document.getElementsByTagName("img");
for(var i= 0,img;img = imgs[i++];){
img.setAttribute("border",2);
img.setAttribute("width","100");
img.setAttribute("height","100");
}
},
queryCommandState:function(){
var images = this.document.getElementsByTagName("img" );
for(var i=0;i<$(images).length;i++){
if($(images[i]).css("width")!="100px"){
return 0; //如果找到宽度不为100的图片,则返回0,代表当前按钮可以点击
}
}
return -1; //否则返回-1,告诉编辑器将当前按钮置灰
}
};
execComman 按钮点击时候要处理的信息,我写的是将所有的图片的border设为2,宽度和高都设置为100
queryCommandState 方法是指当编辑器获取焦点时要处理的事,这里就是遍历所有已上传的图片文件,如果编辑器中存在宽度不为100px的图片,则让当前按钮可点击,否则return -1;表示将按钮置灰不可点击
第五步:最后我们刷新页面后发现,点击按钮还是无效,O(∩_∩)O~那是因为在使用了ueditor编辑器的页面没有引入这个js文件,引入js文件后刷新页面就ok了