使用JavaScript為Kindeditor自定義按鈕增加Audio標(biāo)簽

1、這篇文章主要介紹了使用JavaScript為Kindeditor自左義按鈕增加Audio標(biāo)簽的方 法,KindEditor是一套開源的HTML可視化編輯器，需要的朋友可以參考下流程比較簡單，主要有以下步驟：注冊插件(按鈕、Lang、htmlTags.插件腳本)基于media插件代碼修改注冊插件首先，全局配置kindeditor參數(shù)：KindEditor.Iang( iaudio : MP31);& nbsp;KindEditor.options.htmlTags,audio, = ,src,/controls,autoplay,type,;& nbsp;KindEditor.optio

2、ns.htmlTags,source, = fsrcVcontrolsVautoplayVtype1;在初始化編輯器的地方，配程按鈕列表items參數(shù)，把a(bǔ)udio放在合適的位置：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* );為了便于閱讀，我把a(bǔ)udio按鈕放在最后，在”幫助”標(biāo)簽的后而。為了讓按鈕能夠顯示，我們還需要指定一下CSS樣式：& lt;style≷ 

5、.ke-icon-audio     background-position: Opx -528px;    width: 16px;   : height: 16px;  & lt:/style>這里我圖方便，直接用了自帶的音視頻按鈕的圖標(biāo)，自左義圖標(biāo)請手動(dòng)指左background 樣式屬性。最后，創(chuàng)建腳本kindeditor/plugins/audio/audio.jsaudio目錄手動(dòng)建立。我們把plugins/media/media.js中的代碼復(fù)制到audio.js里，然后著手修改。修改media插件主要是去掉

6、一些無用的屬性，如寬、高、自動(dòng)播放等，并修改插入代碼的部分，手動(dòng) 構(gòu)建”audio”標(biāo)簽的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 =