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

注:我是在1.5.0 这个版本的基础上修改的。这种方式开发的条件是所有的工具栏上的所有按钮都是这种方式定义,而不能像 http://mengkang.net/260.html 里面那样自带的和自定义的混用。

完整demo请查看:https://github.com/fex-team/ueditor/blob/dev-1.5.0/_examples/addCustomizeButton.js

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

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

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

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

下面是知乎的引用样式:

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

首先是一个addCustomizeButton.js文件,我是从 ueditor 官方 fork 过来的,我增加了引用的实例。代码如下:

//自定义引用样式
UE.registerUI('myblockquote',function(editor,uiName){
    editor.registerCommand(uiName,{
        execCommand:function(){
            this.execCommand('blockquote',{
                "style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
            });
        }
    });

    var btn = new UE.ui.Button({
        name:uiName,
        title:'自定义引用',
        cssRules :"background-position: -220px 0;",
        onclick:function () {
           editor.execCommand(uiName);
        }
    });

    editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState('blockquote');
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });

    return btn;
});

然后在customizeToolbarUIDemo.html里面引用该js,也就注册这个自定义的引用按钮。

<!DOCTYPE HTML>
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
    <!--添加按钮-->
    <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>

    <style type="text/css">
        .clear {
            clear: both;
        }
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>二次开发demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
</body>
<script type="text/javascript">
    //实例化编辑器
    UE.getEditor('editor',{
        //清空了工具栏
        toolbars:[[]]
    })
</script>
</html>

评论列表