流程比较简单，主要有以下步骤：
注册插件(按钮、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样式：

这里我图方便，直接用了自带的音视频按钮的图标，自定义图标请手动指定 background 样式属性。
最后，创建脚本
kindeditor/plugins/audio/audio.js
audio目录手动建立。
我们把
plugins/media/media.js
中的代码复制到audio.js里，然后着手修改。
修改media插件
主要是去掉一些无用的属性，如 宽、高、自动播放等，并修改插入代码的部分，手动构建 audio 标签的html代码。
/** * created by admin on 15-5-6. */kindeditor.plugin('audio', function(k) { var self = 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() { var html = [ '', //url '', 'mp3 url', ' ', ' ', '
', '
' ].join(''); var dialog = self.createdialog({ name : name, width : 450, height : 230, title : self.lang(name), body : html, yesbtn : { name : self.lang('yes'), click : function(e) { var url = 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; } var html = '
'; 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) { var uploadbutton = 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) { var url = 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(); } var img = self.plugin.getselectedmedia(); if (img) { var attrs = 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'),