Внедрить Javascript в iFrame, созданный TinyMCE / YUI?

Question

Я пытаюсь вставить / загрузить javascript (например, prototype / jquery) в iFrame, созданный TinyMCE (tinymce.moxiecode.com) или текстовым редактором YUI (http://developer.yahoo.com/yui/editor/), чтобы лучше управлять объектами /images / DIVs внутри него.

iFrame, сгенерированный TinyMCE, по сути является текстовым редактором. Я хочу иметь возможность включать в себя div, которыми я могу манипулировать, добавлять слушателей и т. д., чтобы «расширенный текстовый редактор»становится богаче, а не просто текстовой областью.

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

Используйте мой плагин 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();
                }



           }  ;


    };

если вы осмотрите дерево DOM после запуска TinyMCE, вы заметите, что iframe tinyMCE существует в div до того, как целевая текстовая область будет выбрана для запуска tinyMCE. Так что выберите эту текстовую область и используйте мой плагин:

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

Answer 3

Вы можете попробовать следующее.Получите экземпляр редактора и установите содержимое по вашему желанию.

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