개시하다

summernote의 이미지 옵션은 파일을 업로드하는 방법과 URL에서 삽입하는 방법 두 가지가 있는데 애니메이션은 URL에서만 삽입하는 방법입니다.
파일을 업로드하는 플러그인은 몇 개 있지만 업로드 파일과 동영상을 편집기에 끼워 넣을 수 있는 플러그인은 하나도 없습니다.
summernote의 핵심 파일을 하고 싶지 않기 때문에 이미지 옵션을 참고하면서 기존의 애니메이션 옵션을 확장하여 영상 파일을 올릴 수 있는 플러그인을 만들기로 했다.
나는 여기에 플러그인 제작 절차의 간단한 설명과 플러그인의 사용 방법을 비망록으로 남기고 싶다.

또한 플러그인을 만든 소스 파일이 GiitHub에 업로드되었습니다.
summernote-video-upload

플러그인 만들기

기본적으로 공식 사이트에 따라 플러그인을 만들 수 있지만 회전 함수 설정이 없습니다.
아이콘의 WEB 글꼴과 마찬가지로 플러그 인 옵션으로 설정할 수 있습니다.

$.extend($.summernote.options, {
  videoUpload: {
    icon: '<i class="note-icon-video"></i>'
  },
  callbacks: {
    onVideoLinkInsert: null,
    onVideoUpload: null,
    onVideoUploadError: null
  }
});

비디오 옵션 방법

핵심 파일에서 애니메이션 옵션을 마이그레이션하는 방법은 다음과 같은 네 가지가 있습니다.
show、showVideoDialog、createVideoNode、readFileAsDataURL
특히create Video Node 방법은 영상의 URL을 분석했고, 유튜브라면 유튜브용, 바이모라면 바이모용을 생성했다.
삽입식 유저의 가로 사이즈를 변경하려면 이 방법을 변경하십시오.

$video = $('<iframe>').attr('frameborder', 0)
  .attr('src', '//www.youtube.com/embed/' + youtubeId + (start > 0 ? '?start=' + start : ''))
  .attr('width', '640')
  .attr('height', '360');

이미지 옵션 방법

비디오 파일을 업로드하기 위해 다음 4가지 이미지 옵션을 사용합니다.
insertImage、createImage、insertImagesAsDataURL、insertImagesOrCallback
각각 다음과 같이 명칭을 변경하는 동시에 호출 함수를 이용하는 데 필요한 방법을 추가했다.
insertVideo、createVideo、insertVideosAsDataURL、insertVideosOrCallback、insertVideoLinkOrCallback
먼저 Show 메서드에 파일의 URL을 입력했는지 또는 업로드했는지 판단합니다.
URL이면 insertVideoLinkOrCallback 방법을 사용하고 업로드하면 insertVideoOrCallback 방법을 사용합니다.
insertVideoLinkOrCallback 방법과 insertVideoOrCallback 방법은 이름에 따라 호출 여부를 판정합니다.
이후 insert Video As DataURL 방법, insert Video 방법, create Video 방법에 이어 발리 일일 검사 등을 수행하면서create Video Node 방법으로 애니메이션 플레이어를 생성한다.
이미지 옵션을 사용하기 때문에 호출 함수를 사용하지 않으면 기본 64 인코딩된 비디오가 포함됩니다.
몇 MB 정도였으면 좋겠지만 기본 64코딩에 100MB의 애니메이션이 박혀 있는 것은 무섭다.

콜백 함수 사용

summernote를 호출할 때 다음과 같이 호출 함수를 지정합니다.

$(function() {
  $('.summernote').summernote({
    lang: "ja-JP",
    toolbar: [
      ['insert', ['videoUpload']]
    ],
    callbacks: {
      onVideoUpload: function(files) {
        sendVideoFile(files[0], $(this));
      }
    }
  });
});

다음과 같이 사용할 수 있습니다.
서버 측에서 처리한 후 비디오 파일의 URL을 insertVideoLink OrCallback 방법으로 되돌려줍니다. 유저를 편집에 끼워넣을 수 있습니다.

function sendVideoFile(file, $editor) {
  $.ajax({
      type: 'POST',
      url: 'xxxxx',
      data: {
        fileSize: file.size,
        fileName: file.name,
        fileType: file.type
      },
      beforeSend() {
        $editor.summernote('videoUpload.showVideoUploadMessage', '動画をアップロードしています。');
      }
    })
    .then(function(data) {
      $editor.summernote('videoUpload.insertVideoLinkOrCallback', data.videoUri);
    })
    .catch((...args) => {
      console.log('error');
    })
    .then(function() {
      console.log('finish');
    });
}

끝말

사실 이 플러그인은 오류 처리에 미묘한 점이 있다.
기본적으로 이미지 옵션과 비디오 옵션은 오류가 발생할 때 모드 창만 닫고 처리를 끝내며 메시지를 특별히 표시하지 않습니다.
동영상 파일은 무거워지기 쉬워 오류가 발생했을 때 정보를 표시하고 싶지만 모드 창을 연 상태에서 처리를 멈추면 다시 파일을 업로드해도 잘 작동하지 않고 기본적으로 모드 창을 닫습니다.
그 방면은 아직 개선할 여지가 있다.