使用JavaScript为Kindeditor自定义按钮增加Audio标签

1、这篇文章主要介绍了使用JavaScript为Kindeditor自左义按钮增加Audio标签的方 法,KindEditor是一套开源的HTML可视化编辑器，需要的朋友可以参考下流程比较简单，主要有以下步骤：注册插件(按钮、Lang、htmlTags.插件脚本)基于media插件代码修改注册插件首先，全局配置kindeditor参数：KindEditor.Iang( iaudio : MP31);& nbsp;KindEditor.options.htmlTags,audio, = ,src,/controls,autoplay,type,;& nbsp;KindEditor.optio

2、ns.htmlTags,source, = fsrcVcontrolsVautoplayVtype1;在初始化编辑器的地方，配程按钮列表items参数，把audio放在合适的位置：KindEdito匚rcady(fimction(K) editor = K.create(,#info,#spread_info & nbsp;/其他配置省略.  items :    source； T, undo； tedo； T, preview： print； template； code； cut； copy； paste；   : plainpaste：

3、Xvordpaste T, ustifyleft justifyeenter*, Justifyright*,    justifyfull； nsertorderedlist*, nsertunorderedlist1, indent； *outdent subscript；    superscript； ,clcarhtml uickformat1, electalf, T, fullscreen1,    Tormatblock fontname； fontsize； l Torecolor hilitecolor*, bol

4、d；   : italic； underline, Strikethrough*, lineheight1, rremoveformat T, Image； ,multiimage     T /table1, *hr emoticons： baidumap； agebreak*,    *anchor link： Inlink； T, boutVaudio* );为了便于阅读，我把audio按钮放在最后，在”帮助”标签的后而。为了让按钮能够显示，我们还需要指定一下CSS样式：& lt;style≷ 

5、.ke-icon-audio     background-position: Opx -528px;    width: 16px;   : height: 16px;  & lt:/style>这里我图方便，直接用了自带的音视频按钮的图标，自左义图标请手动指左background 样式属性。最后，创建脚本kindeditor/plugins/audio/audio.jsaudio目录手动建立。我们把plugins/media/media.js中的代码复制到audio.js里，然后着手修改。修改media插件主要是去掉

6、一些无用的属性，如宽、高、自动播放等，并修改插入代码的部分，手动 构建”audio”标签的html代码。/* * Created by admin on 15-5-6.& nbsp;*/KindEditor.pluginf/audio. function(K)   var self = this, name = audio； lang = self.lang(name + T),   : allowMediaUpload = K.undef(self.allowMediaUpload true),   : allowFileManager

7、 = K.undef(self.allowFilcManagen false),   : formatUploadUrl = K.undef(self.formatUploadUrI, true),& nbsp;&n bsp;upload Json= K.undef(self.uploadJson. self.basePath +,php/uploadjson.php,);  self.plugin.mcdia =     edit: function()       var html =   

8、    <div styIe=Hpadding:2Opx;H>:   :    : /url   :  :   ltidiv class=Hke-dialog-row,> :       *<label for=,keUrlH style=Hwidth:60px;M>MP3URL&Ityiabel>        *<：input class=Hke-input-textw type=Ht

9、extH id=,keUrF, name=HurlH value=,n, style=Hwidth:160px;w />  ；        f<input type=l,buttonH class=*ke-upload-buttonH value=M 传” />       :   </div     :   </div>      .join(M);     

10、var dialog = self.createDialog(          name : name,   :      : width : 450,     :     height: 230,          title : self.lang(name),          body : html.      &

11、nbsp;   yesBtn :    :         name : self.lang(,yes,),   :         click : function(e)               var url = K.trim(urlBox.valO),    :            : width = widthB

12、ox.val(),    :            : height = heightBox.val();              if (url = http:/* II K.invalidUrl(url)    :  :          : alert(selfangCinvalidUiT);         &nbs& nbsp

13、;  & nbsp;& nbsp;  & nbsp;& nbsp:&n bsp;alert(self.langfinvalidWidth,);     :           widthBox0.focus():   :      :      ： return: :  :   Anbsp：  :   heightBox0.focus();     

14、Anbsp;        : return;                   :         var html = ≪p>:<audio src=+url+和 comrols=”C0mrols”>:</audi0≷<bi7>&n；/p>；& nbsp;& nbsp;&n bsp;  & nbsp;&n bsp：& nbsp;self.insertHtm

15、l(htmI).hideDialog().focus();   :  :          :  :             ),       ： div = dialog.div,        urlBox = K(,name=HurlH div),   :     viewServerBtn = K(,name=MviewSenfer

16、H div),        widthBox = K(,name=,widthH div),        heightBox = K(,name=,height, div),   :     autostartBox = K(,name=,autostart, div);  & nbsp; & nbsp; urlBoxval(http:);   :   if (allowMediaUpload)    :  

17、   var uploadbutton = K.uploadbutton(   :       button : K(ke-upload-button div)0,   :  :     fieldName : imgFilc；   :  :     url: K.addParam(uploadJson. ,dir=audio,),          afterUpload : function(

18、data)      :       dialog.hideLoadingO;            if (data.error = 0)               var url = data.url;   :      :     if (fonnatUpIoadUrl)         &nbs

19、p;       url = K.formatUrl(url, Absolute*);                            urlBox.val(url);   :           if (self.afterUpload)                 s

20、elf.afterUpload.call(seIf, url);   :              :      :     alerUself.IangCuploadSuccess1);            else    :    :       alert(data.inessage);   :  : &

21、nbsp;               ,          afterError: function(html)      :       dialog.hideLoadingO;     :       self.errorDialog(html);   :      :      :

22、   );     :   uploadbutton.filcBox.change(function(e)           dialog.showLoading(self.lang(,uploadLoading,);          uploadbutton.submit();   :     );   :   else    :    

23、K(ke-upload-button div).hide();   :      :   if (allowFileManager)         viewServrerBtn.click(function(e)      :     selfoadPlugiiUTilemanagef, function()      :       self.plugin.filemanagerDialog

24、(   :           vicwTypc : LIST*.   :      :     dirName : media；     :         clickFn : function(url, title)      :           if (self.dialogslength > 1) &

25、nbsp;              :   K(tname=,urr, div).val(url);   :            :   self.hideDialogO;   :  :          :)   :  :  :      :             );          );        );      else    :     viewServerBtn】idc();            var img =