TinyMCE - динамически заполнять iframe, созданный при вставке события

Question

Мой код создает iframe для события PastePostProcess в TinyMCE.

После поста jquery, который будет использоваться позже для заполнения iframe, iframe заполняется с использованием его жестко закодированного идентификатора: editor.dom.select ( "[ID = 'ааа']") .Пока что это работает, если в редакторе есть только один iframe.

Я бы хотел заполнить iframe, используя локальную переменную e.node , переданную через событие PastePostProcess.

Когда используется 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

Как я уже говорил выше, вот «не очень хорошее» решение, использующее случайный идентификатор.

<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>