Question

I am currently trying figure out how to load an external script into tinymce. The script is the p7EHCscript that is used to make two divs equal heights based on the height of the larger div.

I need the p7EHC script to be able to do this inside the tinymce editor so the it will look like the final page being created.

My current set up with tinymce is:

tinyMCE.init({

            // General options
            mode : "textareas",
            editor_selector : "mceEditor",
            editor_deselector : "mceNoEditor",
            remove_script_host : false,
            convert_urls : false,
            content_css : 'http://localhost/tmtphotography/css/mce.css',

            width: "1030",
            height : "480",

            theme : "advanced",
            plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template,preview",
            file_browser_callback : "filebrowser",
            // Theme options
            theme_advanced_buttons1 : "save,preview,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage,imgae,media,link",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

             theme_advanced_font_sizes : "10px,12px,13px,14px,16px,24px",
     font_size_style_values : "xx-small,x-small,12pt,medium,large,x-large,xx-large",


            // Skin options
            skin : "o2k7",
            // Example content CSS (should be your site CSS)


    });
  `

Any help in understanding how to go about this would be appreciated.

Answer 1

I assume you want to add the scipt as script tag to the document head:

  <script type="text/javascript" src="javascript/p7EHCscripts.js"></script>

Due to the fact that tinymce is using its own iframe with an own document we need to adress this iframe. Here is the code necessary

var iframe_id = 'your_editor_id' + '_ifr'; // place your editor id here+'_ifr'
with(document.getElementById(iframe_id).contentWindow) {

  var h = document.getElementsByTagName("head");
  if (!h.length) return;
  var scripttag = document.createElement("script");
  scripttag.type = "text/javascript";
  scripttag.src = "http://myserver.com/my_dir1/my_dir2/javascript/p7EHCscripts.js"; // example
  h[0].appendChild ( scripttag );
}