javascript - 在iFrame TinyMCE周围添加div容器

Question

我允许我的用户通过TinyMCE编辑器添加YouTube嵌入式视频。我知道所见即所得的内容正在进入一个响应式网站，我想自动将其包裹在宽度可变的视频包装器(https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php)中。

因此，在我们插入Iframe的任何地方，我都希望将其包装在div class = videoWrapper中。我似乎找不到如何包装现有内容的方法。提前致谢。

Answer 1

这里有两个问题将改变您的操作方式...

您什么时候需要安装此<div>？

插入内容时是否必须发生？

去保存内容时可以做这项工作吗？

人们可以通过哪些方式插入此视频数据？

您是否有一个自定义UI来执行此操作？

您依靠TinyMCE插入媒体对话框吗？

其他吗？

要解决上面的项目＃1:

如果您不需要在添加内容时立即添加此内容，则可以在将内容发布到服务器进行存储时始终添加此内容。您可以遍历DOM并查找相对应的<iframe>标签，并将其包装在<div>中。这可能是最简单的方法，因为您只在内容保存上执行此操作，而在服务器上执行此操作，而服务器是一个受更多控制的环境。这还将捕获使用代码 View 的人员，并在随后的编辑 session 中删除包装器<div>。

如果您必须即时添加内容，则项目＃2变得很重要...

如果您只有一种添加<iframe>的方法，则可以查看它们的运行方式，并查看该方法是否会触发您可以用来得到通知的任何事件(例如，发生粘贴，键入等事件) 。如果有多种添加数据的方法(插入媒体，复制/粘贴，代码 View 等)，那么很难找到适用于所有这些可能方法的事件。

注意:并非所有TinyMCE插件都会为其执行的所有操作触发事件，因此，无论内容如何添加，输入内容时您可能都找不到一个可以捕获的事件。

如果是这种情况，您可以使用TinyMCE的一般事件之一(例如'change')，并在那时查找未包装的<iframe>标签:

tinymce.init({
  selector: '#myTextarea', 
  setup: function (editor) {
    editor.on('change', function () {
      //Update the DOM here
    }); 
  }  
}) 

内置的编辑器事件在此处记录:https://www.tinymce.com/docs/advanced/events/