Question

我在Angular 6应用程序中使用Tinymce V5编辑器。视频上传有效，但是我不知道如何在编辑器中显示视频。

这是配置：

this.editor = {
  menubar: false,
  plugins: ['link', 'image', 'media', 'lists', 'codesample', 'autoresize'],
  max_height: 800,
  min_height: 200,
  formats: {
    alignleft: { selector: 'img', styles: { margin: '0 5px' } }
  },
  toolbar: [
    'undo redo | bold italic forecolor backcolor | fontsizeselect | alignleft aligncenter alignright | bullist numlist | table | codesample | link image media'
  ],
  file_picker_types: 'image media',
  video_template_callback: function (data: any) {
    return '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') + '</video>';
  },
  file_picker_callback: function (callback: any, value: any, meta: any) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'video/*, image/*');
    input.onchange = function (event) {
      if (!input.files) return;
      var file = input.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        console.log(input.files);
        // Provide alternative source and posted for the media dialog
        if (meta.filetype == 'media') {
          let formData: FormData = new FormData();
          formData.append('video', file, file.name);
          console.log('VIDEO: ' + file.name);
          __self.postService.uploadVideo(formData)
            .then((result: any) => {
              console.log(result);
              if (result.status === 200) {
                callback(
                  environment.serverBaseUrl + result.body.video
                  // { source2: 'alt.ogg', poster: environment.serverBaseUrl + result.body.thumbnail }
                );
              }
            })
            .catch((error: any) => {
              console.log(error);
            });
        }
        else if (meta.filetype == 'image') {
          let formData: FormData = new FormData();
          formData.append('image', file, file.name);
          __self.postService.uploadImage(formData)
            .subscribe((result: any) => {
              if (result.status === 200) {
                console.log(result);
                callback(environment.serverBaseUrl + result.body.path, { alt: 'My alt text' });
              }
            });
        }
      }
    }
    input.click();
  }

和html部分：

<editor [init]="editor" [(ngModel)]="article.content" (ngModelChange)="contentChange()"></editor>

现在，当我上传视频时，这是在编辑器html代码中插入的内容：

<p><img class="mce-object mce-object-video" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="300" height="150" data-mce-p-controls="controls" data-mce-html="%0A%3Csource%20src%3D%22http%3A//localhost%3A3000/videos/articles/2019/07/1563595492531-AQUAMAN-Trailer-2-%284K-ULTRA-HD%29-NEW-2018.mp4%22%20type%3D%22video/mp4%22%20/%3E" data-mce-object="video" data-mce-selected="1"></p>

显示以下内容：

我想插入给video_template_callback的html代码，以便在编辑器中显示视频，然后让用户播放。

我该如何实现？

如何在编辑器中显示上传的视频？

0 个答案: