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

JavaScript 2019-01-04

流程比较简单，主要有以下步骤：

注册插件

首先，全局配置kindeditor参数：

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

在初始化编辑器的地方，配置按钮列表items参数，把 'audio' 放在合适的位置：

rush:PHP;"> 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样式：

rush:css;">

这里我图方便，直接用了自带的音视频按钮的图标，自定义图标请手动指定 background 样式属性。

最后，创建脚本

rush:plain;"> kindeditor/plugins/audio/audio.js

audio目录手动建立。

我们把

rush:plain;"> plugins/media/media.js

中的代码复制到audio.js里，然后着手修改。

修改media插件

主要是去掉一些无用的属性，如 宽、高、自动播放等，并修改插入代码的部分，手动构建 "audio" 标签的HTML代码。

rush:js;"> /** * 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,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',' ',' ','

','
'
].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 = '

<audio src="'+url+'" controls="controls">

';
self.insertHtml(html).hideDialog().focus();
}
}
}),div = dialog.div,urlBox = K('[name="url"]',div),viewServerBtn = K('[name="viewServer"]',widthBox = K('[name="width"]',heightBox = K('[name="height"]',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.addP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m(uploadJson,'dir=au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>'),afterUpload : function(data) {
        dialog.hideLoading();
        if (data.error === 0) {
          var url = data.url;
          if (formatUploadUrl) {
            url = K.formatUrl(url,'absolute');
          }
          url<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.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.file<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.change(function(e) {
      dialog.showLoading(self.lang('uploadLoading'));
      uploadbutton.submit();
    });
  } else {
    K('.ke-upload-button',div).hide();
  }

  if (allowFileManager) {
    viewServerBtn.click(function(e) {
      self.loa<a href="https://www.jb51.cc/tag/dpl/" target="_blank" class="keywords">dpl</a>ugin('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'));
    url<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.val(attrs.src);
    width<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.val(K.removeUnit(img.css('width')) || attrs.width || 0);
    height<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.val(K.removeUnit(img.css('height')) || attrs.height || 0);
    autostart<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>[0].checked = (attrs.autostart === 'true');
  }
  url<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>[0].focus();
  url<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>[0].select();
},'delete' : function() {
  self.plugin.getSelectedMedia().remove();
}

};
self.clickToolbar(name,self.plugin.media.edit);
});

至此，整个插件基本结束。

需要注意的是，上传文件用的是通用的配置uploadJson参数，但会在上传的时候自动添加一个get参数 "dir=audio" ，以便后台识别：

rush:js;"> url : K.addParam(uploadJson,
JavaScript

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...