Question

我允许我的用户通过TinyMCE编辑器添加YouTube嵌入视频。我知道WYSIWYG的内容将进入一个响应式网站，我想自动将其包装在流畅的视频包装器中（https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php）。

所以我们在任何地方插入了iframe，我想将它包装在div class = videoWrapper中。我似乎无法找到如何包装现有内容。提前谢谢。

Answer 1

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

你必须在什么时候让这个<div>到位？
- 插入内容时是否必须发生？
- 当你去保存内容时，你可以做这项工作吗？
人们可以通过哪些方式插入此视频数据？
- 您是否有自定义用户界面来执行此操作？
- 您是否依赖于TinyMCE插入媒体对话框？
- 其他？

要解决上述第1项：

如果您在添加内容时不需要添加此内容，则可以在将内容发布到服务器进行存储时始终添加此内容。您可以遍历DOM并查找重新发送的<iframe>标记并将其包装在<div>中。这可能是最简单的方法，因为您只在内容保存上执行此操作，并在服务器上完成此操作，这是一个更受控制的环境。这也会捕获人们使用代码视图并在后续编辑会话中删除您的包装器<div>。

如果你必须动态添加东西，那么第2项变得很重要......

如果您只有一种方法可以添加<iframe>，那么您可以查看他们是如何做到的，并查看该方法是否会触发您可以用来通知的任何事件（例如，有事件用于粘贴，密钥等）。如果有多种方法可以添加此数据（插入媒体，复制/粘贴，代码视图等），那么很难找到适用于所有这些可能方法的事件。

注意： 并非所有TinyMCE插件都会针对他们正在执行的操作触发事件，因此您可能无法找到在输入内容时可以正确捕获的事件无论如何添加。

如果是这种情况，您可以使用TinyMCE的一般事件（例如“更改”），并在那时查找未包装的<iframe>标记：

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

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

在iFrame TinyMCE周围添加div容器

1 个答案: