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

您可以使用自己的html return函数设置要更改的模块，可以看到src代码来检查模块，如果是'videoDialog'：

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

您可以在源代码中查看如何实现“ createVideoNode ”，但是在您的情况下，它将类似于：

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

$('.summernote').summernote('module', 'videoDialog').createVideoNode = 
function(url) 
{ 
    // native function generating the elements (iframe...)
    var html= nativeHtmlBuilderFunc(url);

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

Answer 2

以下是使用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>

注意：使用提示而不是引导模式和网址进行验证

Answer 3

编辑summernote-bs4.js 线路编号：6360 将 https：添加到src attr标签

//www.youtube.com/embed/

更改为

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

修改summernote视频嵌入功能

3 个答案: