如何在Summernote编辑器中运行Plyr视频播放器？

核心原因 #

1. DOM渲染时机不匹配：你的Plyr初始化代码在全局作用域执行，而Summernote是在$(document).ready()内初始化，此时编辑区的视频元素还未被Summernote渲染到DOM中，导致Plyr找不到目标元素。
2. Summernote默认过滤规则：Summernote会自动过滤非标准HTML标签/属性，可能移除了Plyr初始化所需的data-*属性或类名。
3. 重复初始化未处理：内容变更后新增的视频元素无法被已执行的Plyr初始化逻辑覆盖。

解决方案 #

1. 绑定Plyr初始化到Summernote生命周期事件 #

将Plyr的初始化逻辑放到Summernote的init回调中，并监听内容变更事件，确保每次内容更新后重新初始化：

$(document).ready(function() {
  $('#summernote').summernote({
    // 初始化完成后立即加载Plyr
    init: function() {
      initPlyrPlayers();
    },
    // 内容变更后重新初始化，覆盖新增视频元素
    onChange: function() {
      initPlyrPlayers();
    }
  });
});

// 封装Plyr初始化逻辑，支持重复调用
function initPlyrPlayers() {
  // 先销毁已存在的实例，避免冲突
  if (window.plyrPlayers) {
    window.plyrPlayers.forEach(player => player.destroy());
  }
  // 重新初始化所有目标元素
  window.plyrPlayers = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
}

2. 配置Summernote允许Plyr所需的HTML结构 #

修改Summernote的过滤规则，确保Plyr依赖的标签和属性不被移除：

$(document).ready(function() {
  $('#summernote').summernote({
    allowedTags: ['div', 'iframe', 'video', 'source', 'span'],
    allowedAttributes: {
      'div': ['class', 'data-plyr-provider', 'data-plyr-embed-id'],
      'iframe': ['src', 'allow', 'allowfullscreen', 'frameborder', 'class'],
      'video': ['controls', 'class'],
      'source': ['src', 'type']
    },
    init: function() {
      initPlyrPlayers();
    },
    onChange: function() {
      initPlyrPlayers();
    }
  });
});

function initPlyrPlayers() {
  if (window.plyrPlayers) {
    window.plyrPlayers.forEach(player => player.destroy());
  }
  window.plyrPlayers = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
}

3. 确保YouTube视频的嵌入格式正确 #

使用Plyr官方推荐的YouTube嵌入结构，避免格式错误导致初始化失败：

<!-- 方式1：使用data属性 -->
<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="你的视频ID"></div>

<!-- 方式2：使用iframe -->
<iframe class="js-player" src="https://www.youtube.com/embed/你的视频ID" allowfullscreen allow="autoplay; fullscreen"></iframe>

内容的提问来源于stack exchange，提问作者Radek