Utilisez JavaScript pour ajouter des balises audio aux compétences de boutons personnalisés Kindeditor_javascript

Le processus est relativement simple et comprend principalement les étapes suivantes :

• Enregistrer le plug-in (bouton, Lang, balises html, script du plug-in)
• Modifié en fonction du code du plug-in multimédia

Plugin d'enregistrement

Tout d'abord, configurez globalement les paramètres de kindeditor :

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

A l'endroit où vous initialisez l'éditeur, configurez le paramètre des éléments de la liste des boutons et mettez
'audio'
Mettez-le au bon endroit :

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'
  ]
});

Pour faciliter la lecture, j'ai mis le bouton audio à la fin, après le label "Aide".

Pour que le bouton soit affiché, il faut également préciser le style css :

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

Pour plus de commodité, j'ai utilisé directement les icônes des boutons audio et vidéo intégrés. Pour personnaliser les icônes, veuillez spécifier manuellement l'attribut de style d'arrière-plan.

Enfin, créez le script

kindeditor/plugins/audio/audio.js

Le répertoire audio est créé manuellement.

On met

plugins/media/media.js

Copiez le code dans

dans audio.js, puis commencez à le modifier.

Modifier le plug-in média

L'essentiel est de supprimer certains attributs inutiles, tels que la largeur, la hauteur, la lecture automatique, etc., de modifier la partie de code insérée et de créer manuellement le code html de la balise "audio".

/**
 * 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);
});

À ce stade, l’ensemble du plug-in est pratiquement terminé.

Il est à noter que le téléchargement de fichiers utilise le paramètre de configuration commun uploadJson, mais un paramètre get "dir=audio" sera automatiquement ajouté lors du téléchargement pour faciliter la reconnaissance en arrière-plan :

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