使用JavaScript为Kindeditor自定义按钮增加Audio标签
流程比较简单，主要有以下步骤：
- 注册插件(按钮、Lang、htmlTags、插件脚本)
- 基于media插件代码修改
注册插件
首先，全局配置kindeditor参数：
KindEditor.lang({
audio:'MP3'
});
KindEditor.options.htmlTags['audio']=['src','controls','autoplay','type'];
KindEditor.options.htmlTags['source']=['src','controls','autoplay','type'];
在初始化编辑器的地方，配置按钮列表items参数，把
'audio'
放在合适的位置：
KindEditor.ready(function(K){
editor=K.create('#info,#spread_info',{
//其他配置省略...
items:[
'source','|','undo','redo','|','preview','print','template','code','cut','copy','paste',
'plainpaste','wordpaste','|','justifyleft','justifycenter','justifyright',
'justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript',
'superscript','clearhtml','quickformat','selectall','|','fullscreen','/',
'formatblock','fontname','fontsize','|','forecolor','hilitecolor','bold',
'italic','underline','strikethrough','lineheight','removeformat','|','image','multiimage',
'|','table','hr','emoticons','baidumap','pagebreak',
'anchor','link','unlink','|','about','audio'
]
});
为了便于阅读，我把audio按钮放在最后，在"帮助"标签的后面。
为了让按钮能够显示，我们还需要指定一下css样式：
<style>
.ke-icon-audio{
background-position:0px-528px;
width:16px;
height:16px;
}
</style>
这里我图方便，直接用了自带的音视频按钮的图标，自定义图标请手动指定background样式属性。
最后，创建脚本
kindeditor/plugins/audio/audio.js
audio目录手动建立。
我们把
plugins/media/media.js
中的代码复制到audio.js里，然后着手修改。
修改media插件
主要是去掉一些无用的属性，如宽、高、自动播放等，并修改插入代码的部分，手动构建"audio"标签的html代码。
/**
*Createdbyadminon15-5-6.
*/
KindEditor.plugin('audio',function(K){
varself=this,name='audio',lang=self.lang(name+'.'),
allowMediaUpload=K.undef(self.allowMediaUpload,true),
allowFileManager=K.undef(self.allowFileManager,false),
formatUploadUrl=K.undef(self.formatUploadUrl,true),
uploadJson=K.undef(self.uploadJson,self.basePath+'php/upload_json.php');
self.plugin.media={
edit:function(){
varhtml=[
'<divstyle="padding:20px;">',
//url
'<divclass="ke-dialog-row">',
'<labelfor="keUrl"style="width:60px;">MP3URL</label>',
'<inputclass="ke-input-text"type="text"id="keUrl"name="url"value=""style="width:160px;"/> ',
'<inputtype="button"class="ke-upload-button"value="上传"/> ',
'</div>',
'</div>'
].join('');
vardialog=self.createDialog({
name:name,
width:450,
height:230,
title:self.lang(name),
body:html,
yesBtn:{
name:self.lang('yes'),
click:function(e){
varurl=K.trim(urlBox.val()),
width=widthBox.val(),
height=heightBox.val();
if(url=='http://'||K.invalidUrl(url)){
alert(self.lang('invalidUrl'));
urlBox[0].focus();
return;
}
if(!/^\d*$/.test(width)){
alert(self.lang('invalidWidth'));
widthBox[0].focus();
return;
}
if(!/^\d*$/.test(height)){
alert(self.lang('invalidHeight'));
heightBox[0].focus();
return;
}
varhtml='<p><audiosrc="'+url+'"controls="controls"></audio><br/></p>';
self.insertHtml(html).hideDialog().focus();
}
}
}),
div=dialog.div,
urlBox=K('[name="url"]',div),
viewServerBtn=K('[name="viewServer"]',div),
widthBox=K('[name="width"]',div),
heightBox=K('[name="height"]',div),
autostartBox=K('[name="autostart"]',div);
urlBox.val('http://');
if(allowMediaUpload){
varuploadbutton=K.uploadbutton({
button:K('.ke-upload-button',div)[0],
fieldName:'imgFile',
url:K.addParam(uploadJson,'dir=audio'),
afterUpload:function(data){
dialog.hideLoading();
if(data.error===0){
varurl=data.url;
if(formatUploadUrl){
url=K.formatUrl(url,'absolute');
}
urlBox.val(url);
if(self.afterUpload){
self.afterUpload.call(self,url);
}
alert(self.lang('uploadSuccess'));
}else{
alert(data.message);
}
},
afterError:function(html){
dialog.hideLoading();
self.errorDialog(html);
}
});
uploadbutton.fileBox.change(function(e){
dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit();
});
}else{
K('.ke-upload-button',div).hide();
}
if(allowFileManager){
viewServerBtn.click(function(e){
self.loadPlugin('filemanager',function(){
self.plugin.filemanagerDialog({
viewType:'LIST',
dirName:'media',
clickFn:function(url,title){
if(self.dialogs.length>1){
K('[name="url"]',div).val(url);
self.hideDialog();
}
}
});
});
});
}else{
viewServerBtn.hide();
}
varimg=self.plugin.getSelectedMedia();
if(img){
varattrs=K.mediaAttrs(img.attr('data-ke-tag'));
urlBox.val(attrs.src);
widthBox.val(K.removeUnit(img.css('width'))||attrs.width||0);
heightBox.val(K.removeUnit(img.css('height'))||attrs.height||0);
autostartBox[0].checked=(attrs.autostart==='true');
}
urlBox[0].focus();
urlBox[0].select();
},
'delete':function(){
self.plugin.getSelectedMedia().remove();
}
};
self.clickToolbar(name,self.plugin.media.edit);
});
至此，整个插件基本结束。
需要注意的是，上传文件用的是通用的配置uploadJson参数，但会在上传的时候自动添加一个get参数"dir=audio"，以便后台识别：
url:K.addParam(uploadJson,'dir=audio'),