TinyMCE - 动态填充在粘贴事件

Question

我的代码是在TinyMCE中的PastePostProcess事件上创建一个iframe。

在jquery帖子之后 - 稍后将用于填充iframe - iframe通过使用其硬编码ID填充： editor.dom.select（“[id ='aaa']”）< / strong>即可。到目前为止，如果编辑器中只有一个iframe，它就可以工作。

我想使用通过PastePostProcess事件传递的本地 e.node 变量来填充iframe。

使用 e.node.firstChild.firstChild 时，我被其 .contentDocument 属性为空的事实所困扰。

您可以在http://fiddle.tinymce.com/中复制/粘贴代码，拖放编辑器外部的内容，并在控制台中查看e.node的问题。

<script type="text/javascript">
tinymce.init({
    selector: "textarea"
    ,plugins: 'paste'
    ,height:300
    ,extended_valid_elements : "iframe[* ], div[* ]"
    ,init_instance_callback: function (editor) {
      editor.on('PastePostProcess', function (e) {
        e.node.innerHTML='<div><iframe id="aaa" style="width:450px;" src="about:blank"></iframe></div>';
        $.post("..", {}, function (data) {

        console.log(e.node.firstChild.firstChild);  // ok
        console.log(e.node.firstChild.firstChild.contentDocument);  // KO (null)

        console.log(editor.dom.select("[id='aaa']")[0]);  // ok
        console.log(editor.dom.select("[id='aaa']")[0].contentDocument);  // ok (HTMLDocument)

        var msg="The iframe has been populated using hard-coded id='aaa'<br/>";
        msg=msg+"How to populate the iframe using the e.node local variable?<br/>";

        editor.dom.select("[id='aaa']")[0].contentDocument.write(msg);
      })
    })
  }
});
</script>

<textarea name="content">Please drag and drop something below<br/><br/><br/></textarea>

在我看来，我接近解决方案，动态定位新创建的iframe。为实现这一点，我缺少什么？

Answer 1

正如我上面评论的那样，这是一个使用随机ID的“不太好”的解决方案。

<script type="text/javascript">
var random_id;
tinymce.init({
    selector: "textarea"
    ,plugins: 'paste'
    ,height:300
    ,extended_valid_elements : "iframe[* ], div[* ]"
    ,init_instance_callback: function (editor) {
      editor.on('PastePostProcess', function (e) {
      random_id='_' + Math.random().toString(36).substr(2,9); // generate random id
        e.node.innerHTML='<div><iframe id="' + random_id + '" style="width:450px;" src="about:blank"></iframe></div>';
        $.post("..", {}, function (data) {
        var msg="The iframe has been populated using random id : " + random_id + "<br/>";
        editor.dom.select("[id=" + random_id + "]")[0].contentDocument.write(msg);
      })
    })
  }
});
</script>

<textarea name="content">Please drag and drop something below<br/><br/><br/></textarea>