Question

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

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

Answer 1

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

以下代码使用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>');
        });

    }

});

Answer 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>');

Answer 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之前，tiny中存在tinyMCE的iframe。所以选择这个textarea并使用我的插件：

//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>")

将Javascript注入由TinyMCE / YUI生成的iFrame中？

3 个答案: