ueditor 自定义按钮,插入html

发布时间:2018-05-14作者:laosun阅读(1453)

ueditor

    ueditor自定义菜单按钮,插入html

    现在跟着博主一步步的来添加一个,.比如我们添加一个名字叫做: insertahtml

    第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“insertahtml”字符串。

    , toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'insertahtml'
            ]]
        	,labelMap:{'insertahtml': '插入本站链接'}
            //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
            //,labelMap:{
            //    'anchor':'', 'undo':''
            //}

    如下图所示:image.png

    第二步:找到你所引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“insertahtml”字符串。

    //为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
        var btnCmds = ['undo', 'redo', 'formatmatch',
            'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
            'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
            'blockquote', 'pasteplain', 'pagebreak',
            'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
            'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
            'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts','insertahtml'];

    如下图所示:image.png

    第三步:设置加载的时候加载这个按钮

    如果你自定义了toolbars,那么一定要添加的,如果使用默认的,则无需添加.

    var ue = UE.getEditor('content', ........ toolbars[数组内别忘了添加]。

    第四步:刷新浏览器缓存,看效果

    清空缓存刷新下页面吧(刷新缓存,chrome浏览器是Ctrl+R,mac下是command+R)!工具栏的对应位置是否出现了一个自己定义的按钮呢?如下图所示:

    image.png

    由于此时未设置对应按钮的图片样式,所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式,接着按照下面的步骤动手吧。

    第五步:如需更改成另外图标,那么制作一张 18 X 18的 png 透明图片

    然后样式这么设置

    .edui-for-insertahtml .edui-icon {
        background: url(/assets/images/insertahtml.png) no-repeat !important;
    }

    效果如下图所示:

    第五步:设置插入事件和内容

    下面我们就来定义该方法的具体内容:

    在初始化编辑器的时候,加上自己的事件处理(插入一个URL),如下代码:

    ue.commands['insertahtml'] = { 
    	execCommand: function() {
    		this.execCommand('insertHtml', '<a href="https://www.sunjs.com/" target="_blank">技术客</a>'); 
    		return true; 
    	}, 
    	queryCommandState: function() { } 
    };


1 +1

版权声明

 前端  源码

 请文明留言

0 条评论