Embed Javascript in an iFrame created by TinyMCE / YUI?

Question

I am trying to insert / load javascript (e.g. prototype / jquery) into an iFrame generated by TinyMCE (tinymce.moxiecode.com) or a YUI text editor ( http://developer.yahoo.com/yui/editor/ ) to better manipulate objects / images / div inside.

iFrame, created by TinyMCE, is a text editor. I want to be able to include divs that I can manipulate, add listeners, etc., so that the "rich text editor" becomes richer, and not just a text field.

Answer 1

You can dynamically add a script tag to an iFrame document. The contents of the script tag will be immediately executed.

The following code uses TinyMCE version 4 and has been tested on IE7, IE8, FF and 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 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

You can try the following. Get a copy of the editor and configure it as you wish.

// 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();
                }



           }  ;


    };

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