修改summernote视频嵌入功能答案

【问题标题】：modifying summernote video embed feature修改summernote视频嵌入功能
【发布时间】：2019-08-14 03:08:29
【问题描述】：

当使用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>

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

【问题讨论】：

标签： jquery summernote

【解决方案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>

注意：使用提示符代替引导模式，需要验证url

【讨论】：

可以完成这项工作，尽管将视频 url 直接添加到 iframe 可能不起作用，我仍然需要模态但我可以找到添加它的方法。感谢您的提醒..

【解决方案2】：

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

//www.youtube.com/embed/

改成

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

【讨论】：

这不相关。

【解决方案3】：

您可以设置要更改的模块以返回您自己的html，您可以查看src代码以找到正确的模块，在您的情况下是'videoDialog'：

$('.summernote').summernote('module', 'videoDialog').createVideoNode = function(url) { *return your html* };

您可以检查源代码以查看“createVideoNode”如何生成 html，但在您的情况下，您可以像这样将该内容添加到 div：

var nativeHtmlBuilderFunc = $('.summernote').summernote('module', 'videoDialog').createVideoNode;

// replaces the original html function with your own
$('.summernote').summernote('module', 'videoDialog').createVideoNode = 
function(url) 
{ 
    // get original generate html (that has the iframe...)
    var html = nativeHtmlBuilderFunc(url);

    ... create the div and add the original html content to your div
    return *that div*;
};

【讨论】：