周梦康 发表于 2014-06-24 8183 次浏览 标签 : UEditor

注:我现在修改的版本是1.5.0以下的版本

以修改百度编辑器的引用功能为例:

由于百度编辑器的引用默认样式,不太喜欢,像缩进,我想弄成知乎上面的给应用这个节点加一个灰色的左边框。

首先看百度编辑器默认的引用样式:

百度编辑器(ueditor)二次开发之添加一个自定义按钮(方式一)

下面是知乎的引用样式:

现在要做的就是把百度编辑器的引用样式改为知乎的样式。

初始化ueditor,在头部引入百度编辑的文件

<script type="text/javascript" charset="utf-8" src="{$config_siteurl}statics/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$config_siteurl}statics/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="{$config_siteurl}statics/ueditor/lang/zh-cn/zh-cn.js"></script>

然后在下面做初始化配置,增加了一个quankrblockquote 自定义的引用按钮

修改ueditor.all.min.js,搜索undo redo发现如下代码:

c="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".split(" ")

由于这里是编译压缩过的代码,所以可读性很差,可以查看ueditor.all.js,其实上面这段代码对应的是

//为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
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'];

即所有可能会在工具栏上显示的按钮,所以需要在刚刚的ueditor.all.min.js那段代码默认加上quankrblockquote

c="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 quankrblockquote".split(" ")

下面工具栏上面就有了引用按钮(我已经把修改编辑器的样式,这里就不详细说明了。)

那怎么让其点击触发引用呢?

$(function(){
    //初始化编辑器
    var editor = UE.getEditor('editor', {
        toolbars: [
            ['quankrblockquote','bold','italic']
        ],
        labelMap:{
            'quankrblockquote':'引用'
        },
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });
    //添加自定义引用按钮
    editor.commands['quankrblockquote'] = {
        execCommand : function() {
            this.execCommand('blockquote',{
                "style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
            });
            return true;
        }
    };
    //实时监听工具栏上面的按钮的状态
    editor.addListener('selectionchange', function (){
        var state = editor.queryCommandState('blockquote');
        var _e = $("#edui3_state");
        if(state){
            _e.addClass("edui-state-checked");
        }else{
            _e.removeClass("edui-state-checked");
        }
    });
})            
</script>

参考例子:https://github.com/fex-team/ueditor/blob/dev-1.5.0/_examples/customToolbarDemo.html

评论列表