Use JavaScript to add Audio tag _ javascript tips for the Kindeditor Custom button

This article mainly introduces how to add the Audio tag for the Kindeditor Custom button using JavaScript. KindEditor is an open-source HTML visual editor. If you need it, you can refer to the following process for more information, follow these steps:

• Register plug-ins (buttons, Lang, htmlTags, and plug-in scripts)
• Media Plugin-based code modification

Register plug-ins

First, configure the kindeditor parameter globally:

KindEditor.lang({ audio : 'MP3'}); KindEditor.options.htmlTags['audio'] = ['src','controls','autoplay','type']; KindEditor.options.htmlTags['source'] = ['src','controls','autoplay','type'];

In the initialization Editor, configure the items parameters in the button list
'Audio'
Place it in the appropriate position:

KindEditor. ready (function (K) {editor = K. create ('# info, # spread_info', {// other configurations are omitted... 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', 'strikethangout', 'lineheight', 'removeformat', '|', 'image', 'multiimage', '|', 'table', 'hr ', 'emoticons', 'baidumap', 'pagebar', 'anchor ', 'link', 'unlink',' | ', 'about', 'audio']});

For ease of reading, I put the audio button at the end of the help tab.

To enable the button to be displayed, we also need to specify the css style:

In this example, the icon of the built-in audio and video buttons is used. to customize the icon, manually specify the background style attribute.

Finally, create a script

kindeditor/plugins/audio/audio.js

Manually create the audio directory.

We set

plugins/media/media.js

Copy the code in to audio. js and modify it.

Modify media plugin

It is mainly to remove some useless attributes, such as width, height, and automatic playback, and modify the part of the inserted code to manually construct the html code of the "audio" tag.

/*** 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 () ;}}), p = dialog. p, urlBox = K ('[name = "url"]', p), viewServerBtn = K ('[name = "viewServer"]', p ), widthBox = K ('[name = "width"]', p), heightBox = K ('[name = "height"]', p ), autostartBox = K ('[name = "autostart"]', p); urlBox. val ('HTTP: // '); if (allowMediaUpload) {var uploadbutton = K. uploadbutton ({button: K ('. ke-upload-button ', p) [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 ('uploading'); uploadbutton. submit () ;}) ;}else {K ('. ke-upload-button ', p ). 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"]', p ). 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 );});

So far, the entire plug-in has basically ended.

It should be noted that the uploadJson parameter is a common configuration for uploading files, but a get parameter "dir = audio" will be automatically added during the upload for background recognition:

url : K.addParam(uploadJson, 'dir=audio'),