将 Javascript 注入 TinyMCE/YUI 生成的 iFrame？答案

【问题标题】：Inject Javascript into iFrame generated by TinyMCE/YUI?将 Javascript 注入 TinyMCE/YUI 生成的 iFrame？
【发布时间】：2010-06-13 17:31:39
【问题描述】：

我正在尝试将javascript（例如prototype/jquery）插入/加载到由TinyMCE（tinymce.moxiecode.com）或YUI的文本编辑器（http://developer.yahoo.com/yui/editor/）生成的iFrame中，以便更好地操作对象/图像/里面有DIV。

TinyMCE 生成的 iFrame 基本上是一个文本编辑器。我希望能够包含我可以操作、添加侦听器等的 div，以便“富文本编辑器”变得更丰富，而不仅仅是文本区域。

【问题讨论】：

iframe 的src 是什么？
src="javascript:;"我认为这意味着 YUI 使用 javascript 生成 iFrame？
没有 tinymce 生成 iframe

标签： javascript tinymce

【解决方案1】：

您可以将脚本标签动态添加到 iFrame 的文档中。 script 标签的内容会立即被执行。

以下代码使用 TinyMCE 版本 4，已在 IE7、IE8、FF 和 Chrome 上测试

tinymce.init({
    setup: function (ed) {
        // make sure the instance of the TinyMCE editor has been fully loaded
        ed.on('init', function (args) {
            // find the iframe which relates to this instance of the editor
            var iframe = $("#" + args.target.id + "_ifr");

            // get the head element of the iframe's document and inject the javascript
            $(iframe[0].contentWindow.document)
                .children('html')
                .children('head')
                .append('<script type="text/javascript">alert("Executing inside iFrame!");</script>');
        });

    }

});

【讨论】：

我正在尝试这个：.append('

【解决方案2】：

您可以尝试以下方法。获取编辑器实例并根据需要设置内容。

// editor_id = the id of your former textarea
editor_instance = tinymce.EditorManager.getInstanceById('editor_id');
// replaces the editory content
editor_instance.setContent('<div>your_content</div>');

// or use the following, adds content
editor_instance.execCommand('mceInsertContent', false , '<div>your_content</div>');

【讨论】：

【解决方案3】：

使用我的 jquery 插件htmltiny（依赖于另一个插件jqtiny）：

  $.fn.jqtiny=function(){

         if($(this).get(0).tagName==='TEXTAREA'){

                return $(this).prev().find('iframe').contents();


           };
    };

    $.fn.htmltiny=function(html){

           if($(this).get(0).tagName==='TEXTAREA'){
                if(html){
                    $(this).jqtiny().find('body').html(html);
                    return $(this);
                }else{
                    return $(this).jqtiny().find('body').html();
                }



           }  ;


    };

如果您在触发 TinyMCE 后检查 DOM 树，您会注意到在选择目标 textarea 以触发 tinyMCE 之前，在 div 中存在 tinyMCE 的 iframe。所以选择这个文本区域并使用我的插件：

//to inject Javascript 

 $('textarea').jqtiny().find('head').append('<script type="text/javascript">alert("Executing inside iFrame!");</script>');
    //to get HTML from iframe
    $('textarea').htmltiny()
    //to set HTML in iframe
    $('textarea').htmltiny("<p>My new HTML</p>")

【讨论】：

当您可以使用 tinymce.EditorManager.getInstanceById 或在初始化函数中引用它时，为什么还要使用所有代码来选择 TinyMCE 实例