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


Posted in Javascript onMarch 18, 2016

流程比较简单,主要有以下步骤:

  • 注册插件(按钮、Lang、htmlTags、插件脚本)
  • 基于media插件代码修改

注册插件

首先,全局配置kindeditor参数:

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

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

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样式:

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

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

最后,创建脚本

kindeditor/plugins/audio/audio.js

audio目录手动建立。

我们把

plugins/media/media.js

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

修改media插件

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

/**
 * 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 = [
        '<div style="padding:20px;">',
        //url
        '<div class="ke-dialog-row">',
        '<label for="keUrl" style="width:60px;">MP3 URL</label>',
        '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" />  ',
        '<input type="button" class="ke-upload-button" value="上传" />  ',
        '</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('[name="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', 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'));
        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);
});

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

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

url : K.addParam(uploadJson, 'dir=audio'),
Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
基于jQuery实现收缩展开功能
Mar 18 #Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python中调用其他程序的方式详解
2019/08/06 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
班组长竞聘书
2014/03/31 职场文书
小学老师寄语大全
2014/04/04 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏