UMEditor加入音乐功能
1.添加plugin
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加入music模块
(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.引用时，加入新定义的标签music
toolbar:['music']