Javascript 在iFrame TinyMCE周围添加div容器

我允许我的用户通过TinyMCE编辑器添加YouTube嵌入式视频。我知道WYSIWYG的内容将进入一个响应迅速的网站，我想自动将其包装在fluid width视频包装器（）中

---

因此，无论我们在何处插入了Iframe，我都希望将其包装在div class=videoWrapper中。我似乎找不到如何包装现有内容。提前感谢。

这里有两个问题将改变你如何做到这一点

您必须在什么时候将此

安装到位？

• 插入内容时是否必须发生这种情况
• 当你去保存内容时，你能做这项工作吗

人们可以通过什么方式插入这些视频数据？

• 您是否有自定义UI来执行此操作
• 您是否依赖TinyMCE插入介质对话框
• 其他的

针对上述第1项：

如果在添加内容时不需要添加此内容，则可以在将内容发布到服务器进行存储时始终添加此内容。您可以遍历DOM，查找相关的

标记，并将它们包装在

中。这可能是最简单的方法，因为您只在内容保存上执行此操作，而在服务器上执行此操作，而服务器是一个更受控制的环境。这还将捕获到在后续编辑会话中使用代码视图并删除包装的人

如果您必须在运行中添加内容，那么第2项就变得很重要

如果您只有一种方法可以添加

，那么您可以查看他们是如何添加的，并查看该方法是否触发任何可用于通知的事件（例如，有用于粘贴、键入等的事件）。如果有多种方法添加此数据（插入介质、复制/粘贴、代码视图等），则很难找到适用于所有这些可能方法的事件

注意：并非所有TinyMCE插件都会触发事件，因此，无论内容是如何添加的，在输入内容时都可能找不到可以捕捉到的事件

如果是这种情况，您可以使用TinyMCE的一个通用事件（例如“更改”），并在此时查找未包装的

标记：

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

---

内置编辑器事件记录在这里：

我最终使用了media\u url\u解析器函数，该函数允许我在传入的iframe周围添加一个包装器。你的观点被很好地理解了，我也可以在所见即所得的过程中添加它，但我想在编辑器中添加它，因为我们有一个内置的css，可以准确地显示他们需要看到的内容。@jeynon，你能展示一下你是如何使用解析器包装最初的tinymce行为的吗？我无法访问默认行为。@MohammedNoureldin显示了如何更改默认行为。不知道如何包装原始版本，但如果您只处理iFrame，它将对您有所帮助。您能告诉我您是如何使用

媒体url\u解析器

功能的吗？