标签归档：UMeditor

给UMeditor添加自定义按扭

发表回复

UMeditor是UEditor的mini版本，特点是体积小巧和更快的加载速度，下面演示如何给UMeditor添加自定义按扭。

<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>给UMeditor添加自定义按扭</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.js"></script>
    <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>

    <style>

        /*设置按扭样式*/
        .edui-icon-test{
           background-position: -380px 0;
        }
    </style>
    <script>

        window.UMEDITOR_CONFIG.toolbar = [
            // 加入一个 test
            'test | source | undo redo | bold italic underline strikethrough  forecolor backcolor | removeformat |',
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | emotion image video | map',
            '| fullscreen'
        ];

        UM.registerUI('test',
                function(name) {
                    var me = this;
                    var $btn = $.eduibutton({
                        icon : name,
                        click : function(){
                           alert("test");
                        },
                        title: '测试'
                    });

                    this.addListener('selectionchange',function(){
                        //切换为不可编辑时，把自己变灰
                        var state = this.queryCommandState(name);
                        $btn.edui().disabled(state == -1).active(state == 1)
                    });
                    return $btn;
                }
        );

    </script>


</head>
<body>
<h1>给UMeditor添加自定义按扭</h1>

<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
    <p>这里我可以写一些输入提示</p>
</script>

<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
</script>

</body>
</html>

百度编辑器官网 http://ueditor.baidu.com