UMEditor의 음악 기능 추가

1. 플러그인 추가

UM.plugins['music'] = function(){
    var me = this;
    this.addOutputRule(function(root){
        $.each(root.getNodesByTagName('audio'),function(i,a){
            var _src = utils.html(a.getAttr('_src'));
            if(!/^(ftp|https?|\/|file)/.test(_src)){
                _src = 'http://' + _src;
            }
            a.setAttr('src', _src);
            a.setAttr('_src')
        })
    });
    this.addInputRule(function(root){
        $.each(root.getNodesByTagName('audio'),function(i,a){
            a.setAttr('_src', utils.html(a.getAttr('src')));
        })
    });
    me.commands['music'] = {
        execCommand : function( cmdName, opt ) {
            var me = this;
            var rng = me.selection.getRange();
            if(rng.collapsed){
                var start = rng.startContainer;
                if(start == domUtils.findParentByTagName(start,'audio',true)){
                    $(start).attr(opt);
                    rng.selectNode(start).select()
                }else{
                    rng.insertNode($('').attr(opt)[0]);
                }
            }else{
                alert(' ');
            }
        },
        queryCommandState:function(){
            return this.queryCommandValue('music') ? 1 : 0;
        },
        queryCommandValue:function(){
            var path = this.selection.getStartElementPath();
            var result;
            $.each(path,function(i,n){
                if(n.nodeName == "audio"){
                    result = n;
                    return false;
                }
            })
            return result;
        }
    };
};

2. dialogs에 음악 모듈 추가

(function(){
    var utils = UM.utils;
    function srcStartWith(href, arr) {
        href = href.replace(/^\s+|\s+$/g, '');
        for (var i = 0, ai; ai = arr[i++];) {
            if (href.indexOf(ai) == 0) {
                return true;
            }
        }
        return false;
    }
    UM.registerWidget('music', {
        tpl: "" +
            "" +
            "" +
            "" +
            "" +
            "" +
//            "" +
//            "" +
//            "" +
//            "" +
//            "" +
//            "" +
//            "" +
//            "" +
//            "" +
            "
" +
//            "" +
//            "" +
//            "
" +
//            "
",
        initContent: function (editor) {
            var lang = editor.getLang('music');
            if (lang) {
                var html = $.parseTmpl(this.tpl, lang.static);
            }
            this.root().html(html);
        },
        initEvent: function (editor, $w) {
            var music = editor.queryCommandValue('music');
            if(music){
                $('#edui-music-Jsrc',$w).val(utils.html($(music).attr('src')));
//                $('#edui-music-Jtitle',$w).val($(music).attr('title'));
//                $(music).attr('target') == '_blank' && $('#edaaui-music-Jtarget').attr('checked',true)
            }
            $('#edui-music-Jsrc',$w).focus();
        },
        buttons: {
            'ok': {
                exec: function (editor, $w) {
                    var src = $('#edui-music-Jsrc').val().replace(/^\s+|\s+$/g, '');
                    if (src) {
                        editor.execCommand('music', {
                            'src': src,
//                            'target': $("#edui-music-Jtarget:checked").length ? "_blank" : '_self',
//                            'title': $("#edui-music-Jtitle").val().replace(/^\s+|\s+$/g, ''),
                            '_src': src
                        });
                    }
                }
            },
            'cancel':{}
        },
        width: 400
    })
})();

3. UI 등록

 UM.registerUI('link image video map formula music',function(name){...

4. lang 추가

'music':{
        'static':{
            'lang_input_text':' ：',
            'lang_input_url':' ：',
            'lang_input_title':' ：',
        },
        'validLink':' ',
        'httpPrompt':' http ， http:// '
    },

5. css 설정

.edui-btn-toolbar .edui-btn .edui-icon-music{ background-position: -18px -40px; }

6. 인용 시 새 정의의 탭 음악 추가

toolbar:['music']