JavaScript를 사용하여 Kindeditor 사용자 정의 버튼에 오디오 태그 추가_javascript 팁

과정은 비교적 간단하며 주로 다음 단계로 구성됩니다.

• 플러그인 등록(버튼, Lang, htmlTags, 플러그인 스크립트)
• 미디어 플러그인 코드에 따라 수정됨

플러그인 등록

먼저 kindeditor 매개변수를 전체적으로 구성합니다.

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

에디터를 초기화하는 곳에 버튼 목록 항목 매개변수를 구성하고
를 입력합니다. '오디오'
올바른 위치에 넣으세요:

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

읽기 쉽도록 오디오 버튼을 '도움말' 라벨 뒤 마지막 부분에 배치했습니다.

버튼을 표시하려면 CSS 스타일도 지정해야 합니다.

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

편의상 내장된 오디오 및 비디오 버튼의 아이콘을 직접 사용했습니다. 아이콘을 맞춤설정하려면 배경 스타일 속성을 수동으로 지정하세요.

마지막으로 스크립트를 작성합니다

kindeditor/plugins/audio/audio.js

오디오 디렉토리는 수동으로 생성됩니다.

넣었습니다

plugins/media/media.js

의 코드를 audio.js에 복사한 후 수정을 시작하세요.

미디어 플러그인 수정

가장 중요한 것은 너비, 높이, 자동 재생 등과 같은 일부 쓸모 없는 속성을 제거하고 삽입된 코드 부분을 수정한 다음 "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 매개변수가 사용되지만 배경 인식을 용이하게 하기 위해 업로드 시 가져오기 매개변수 "dir=audio"가 자동으로 추가됩니다.

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