Use JavaScript to add audio tags _javascript tips for kindeditor custom buttons

The process is relatively simple, with the following steps:

• Registering Plug-ins (buttons, Lang, htmltags, plug-in scripts)
• Based on media plug-in code modifications

Registering Plug-ins

First, configure the Kindeditor parameters globally:

Kindeditor.lang ({
 audio: ' MP3 '
});
 kindeditor.options.htmltags[' audio '] = [' src ', ' controls ', ' AutoPlay ', ' type '];
 kindeditor.options.htmltags[' source ' = [' src ', ' controls ', ' AutoPlay ', ' type '];

Where the editor is initialized, configure the button list items parameter to
' Audio '
To put in the right place:

Kindeditor.ready (function (K) {
editor = k.create (' #info, #spread_info ', {
  //other configuration omitted ...
  ) Items: [
    ' source ', ' | ', ' undo ', ' Redo ', ' | ', ' preview ', ' print ', ' template ', ' Code ', ' Cut ', ' copy ', ' Paste ',
    ' pla Inpaste ', ' 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 '
  ]
};

For readability, I put the audio button at the end, behind the Help tab.

In order for the button to display, we also need to specify the CSS style:

<style>
  Ke-icon-audio {
    background-position:0px-528px;
    width:16px;
    height:16px;
  }
</style>

Here I map convenient, directly with the audio and video button with the icon, custom icon Please specify background style properties manually.

Finally, create a script

Kindeditor/plugins/audio/audio.js

The audio directory is manually established.

We put

Plugins/media/media.js

Copy the code in the Audio.js and then proceed to modify it.

Modify Media Plugin

The main is to remove some useless properties, such as wide, high, autoplay and so on, and modify the part of the inserted code, manually build the "Audio" tag html code.

/** * Created by admin on 15-5-6. */Kindeditor.plugin (' Audio ', function (K) {var self = this, name = ' Audio ', lang = Self.lang (name + '. '), allowmed Iaupload = K.undef (Self.allowmediaupload, true), Allowfilemanager = K.undef (Self.allowfilemanager, false), FormatU Ploadurl = 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=;" >mp3 url</label> ', ' <input class= ' ke-input-text ' type= ' text ' id= ' keurl ' name= ' URL ' value= ' ' style= ' wid th:160px "/>  ", "<input type=" button "class=" Ke-upload-button "value=" upload "/>  ", '
      ;/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 (' [n
        Ame= "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 '), Functi
              On () {self.plugin.filemanagerDialog {viewtype: ' LIST ', dirname: ' Media ', Clickfn:function (URL, title) {if (Self.dialogs.length > 1) {K (' [name= ') ur
                  L "], 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);

 });

At this point, the entire plug-in is basically over.

It should be noted that the upload file is a generic configuration Uploadjson parameter, but will automatically add a get parameter "Dir=audio" in the upload, for background recognition:

Url:k.addparam (Uploadjson, ' Dir=audio '),