使用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代码。

/** * 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 = ["<div style="padding:20px;">",//url"<div class="ke-dialog-row">","<label for="keUrl" style="width:60px;">MP3 URL</label>","<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" />  ","<input type="button" class="ke-upload-button" value="上传" />  ","</div>","</div>"].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 = "<p><audio src=""+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） {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"）,