修改summernote视频嵌入功能

Question

使用summernote视频插件添加/嵌入youtube视频时，它会返回类似这样的代码

<iframe frameborder="0" src="//www.youtube.com/embed/LMlBP-nmNgs" width="640" height="360" class="note-video-clip"></iframe>

我愿意做的是将其改为

<div class='embed-container'><iframe src='https://www.youtube.com/embed/LMlBP-nmNgs' frameborder='0' allowfullscreen></iframe></div>

删除固定的宽度/高度等，只是试图让它更具响应性！任何人都可以指出我的方向，以便我可以弄清楚如何覆盖现有的嵌入视频功能。谢谢。

Answer 1

以下是使用custom button的示例

$(document).ready(function() {
  $('#summernote').summernote({
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'italic', 'underline', 'clear']],
      ['fontname', ['fontname']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'hr']],
      ['view', ['fullscreen', 'codeview']],
      ['mybutton', ['myVideo']] // custom button
    ],

    buttons: {
      myVideo: function(context) {
        var ui = $.summernote.ui;
        var button = ui.button({
          contents: '<i class="fa fa-video-camera"/>',
          tooltip: 'video',
          click: function() {
            var div = document.createElement('div');
            div.classList.add('embed-container');
            var iframe = document.createElement('iframe');
            iframe.src = prompt('Enter video url:');
            iframe.setAttribute('frameborder', 0);
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('allowfullscreen', true);
            div.appendChild(iframe);
            context.invoke('editor.insertNode', div);
          }
        });

        return button.render();
      }
    }
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="summernote"></div>

注意：需要使用提示而不是bootstrap模式和url进行验证

Answer 2

编辑summernote-bs4.js行号：6360将https：添加到src attr标记

//www.youtube.com/embed/ 

改成

https://www.youtube.com/embed/