UEditor新增自定义按钮

在ueditor.config.js中找到toolbars的数组,并在数组中添加一个你需要新增的按钮功能名称,如下图所示

在zh-cn.js中找到labelMap并添加如下图所示,主要是用于鼠标放置上去显示的文字提示内容

在ueditor.all.js中找到btnCmds数组的最后添加custombtn,如下图所示

在ueditor.css中添加自己想要的样式,如下所示

.edui-default  .edui-for-emoticon .edui-icon {
    /* 默认是images/icons.png背景图片,你也可以设置自己的背景图片 */
    background-position: -60px -20px;
}

自定义按钮的功能代码,在ueditor.all.js中添加如下代码

UE.plugins['code']=function(){
    var me=this,tagNames = ['code'];
    UE.commands['code'] = {
        execCommand:function (cmdName) {
			//获取文本选择域
			var range = me.selection.getRange();
			//过滤嵌套标签
			var obj = domUtils.filterNodeList(me.selection.getStartElementPath(),tagNames);
			//闭合时单独处理
			if ( range.collapsed ) {
				if ( obj ) {
					var tmpText =  me.document.createTextNode('');
					range.insertNode( tmpText ).removeInlineStyle( tagNames );
					range.setStartBefore(tmpText);
					domUtils.remove(tmpText);
				} else {
					var tmpNode = range.document.createElement( tagNames[0] );
					range.insertNode( tmpNode ).setStart( tmpNode, 0 );
				}
				range.collapse( true );
			} else {
				//添加或删除指定的标签
				obj ? range.removeInlineStyle( tagNames ) : range.applyInlineStyle( tagNames[0] );
			}
			//选择文本
			range.select();
            return true;
        },
        queryCommandState:function () {
			//点击按钮后要处理的信息0代表当前按钮未点击1已点击-1告诉编辑器将当前按钮置灰
            return domUtils.filterNodeList(me.selection.getStartElementPath(),tagNames) ? 1 : 0;
        }
    };
};

打赏

您看完此文章的心情是

  • 1人

  • 鼓掌

    0人

  • 草泥马

    0人

  • 愤怒

    0人

  • 鄙视

    0人

评论

    暂无评论...