asked on

JavaScript Error: Adding CSS to TinyMCE

My code works in IE 6 and IE7 but it does NOT work in Firefox, Chrome or other compliant browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<script type="text/javascript" src="http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
 
function loadEditors()
{
 
  document.getElementsByTagName('h1')[0].style.display='none';
  var editors = document.getElementsByTagName('textarea');
 
  var smpl = {
	mode : "exact",
	theme : "advanced",
	plugins : "safari,inlinepopups,paste",
	theme_advanced_buttons1 : "undo,redo,|,cut,copy,paste,pastetext,|,charmap",
	theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,sub,sup,|,forecolor,backcolor",
	theme_advanced_buttons3 : "justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_toolbar_location : "external"
  };
  var adv = {
	mode : "exact",
	theme : "advanced",
	plugins : "safari,style,layer,table,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
	theme_advanced_buttons1 : "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,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template",
 
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_toolbar_location : "external"
  };
 
    for(var i = 0; i < editors.length; i++)
    {
      var id = editors[i].getAttribute('id');
      if(editors[i].className.indexOf('fullEditor'))
        new tinymce.Editor(id, adv).render();
      else if(editors[i].className.indexOf('simpleEditor'))
        new tinymce.Editor(id, smpl).render();
       addEditorCSS (id+'_ifr',editors[i].className.split(" ")[1]) ////////////////// This does Not Work
    }
}
 
function addEditorCSS (child,css) {
  var ifr = document.getElementById(child).contentDocument;
  if(ifr==null)
	ifr=document.getElementById(child).contentWindow.document; //IE
  if(ifr) { 
   var headID = ifr.getElementsByTagName("head")[0];
   var cssNode = ifr.createElement("link");
   cssNode.type = "text/css";
   cssNode.rel = "stylesheet";
   cssNode.href = css;
   cssNode.media = "screen";
   headID.appendChild(cssNode);
  }
}
 
</script>
</head>
<body onload="var t=setTimeout('loadEditors();',1000)"> <br /><br /><br /><br /><br /><br /><br />
<h1>Loading... Please Wait!</h1>
<div>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
    <textarea id="elm1" class="fullEditor http://fds2432.googlepages.com/red.css" name="elm1" rows="15" cols="80" style="width: 80%;height: 180px">Item 1</textarea>
<hr />
    <textarea id="elm2" class="simpleEditor http://fds2432.googlepages.com/blue.css" name="elm2" rows="15" cols="80" style="width: 80%;height: 80px">Item 2</textarea>
<hr />
    <textarea id="elm3" class="simpleEditor http://fds2432.googlepages.com/green.css" name="elm3" rows="15" cols="80" style="width: 80%;height: 180px">Item 3</textarea>
</form>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

jwmcpeak

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

Do these pages produce JavaScript errors for you?

http://fds2432.googlepages.com/tinyMCE1.html
http://fds2432.googlepages.com/tinyMCE2.html
http://fds2432.googlepages.com/tinyMCE3.html

hankknight

ASKER

I found the answer here, thank you.
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15483

jwmcpeak

I could've sworn I hit send; apparently I didn't. I'm glad you found the answer, and this might've worked for you, too. Below the following line should've been posted 30 minutes ago, but alas I didn't click submit.

-----------------------------

Yes, I do get errors. It looks like that the iframes aren't in the document before document.getElementById() is called in addEditorCSS().

Looking at the TinyMCE documentation, I found a PostRender event. Try this implementation of loadEditors():

function loadEditors() {
    var editors = document.getElementsByTagName('textarea');
 
    var smpl = {
        mode : "exact",
        theme : "advanced",
        plugins : "safari,inlinepopups,paste",
        theme_advanced_buttons1 : "undo,redo,|,cut,copy,paste,pastetext,|,charmap",
        theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,sub,sup,|,forecolor,backcolor",
        theme_advanced_buttons3 : "justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_toolbar_location : "external"
    };
    
    var adv = {
        mode : "exact",
        theme : "advanced",
        plugins : "safari,style,layer,table,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme_advanced_buttons1 : "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,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template",
 
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_toolbar_location : "external"
    };
 
    for(var i = 0; i < editors.length; i++) {
        var id = editors[i].getAttribute('id');
        var ed = null;
        
        if (editors[i].className.indexOf('fullEditor') > -1) {
            ed = new tinymce.Editor(id, adv);
        }
        else if(editors[i].className.indexOf('simpleEditor') > -1) {
            ed = new tinymce.Editor(id, smpl);
        }
        
        ed.onPostRender.add((function (ifrId, href) {
            return function(ed, cm) {
                addEditorCSS(ifrId, href);
            }
        })(id + "_ifr", editors[i].className.split(" ")[1]));
        
        ed.render();
            
    }
}

Open in new window

hankknight

ASKER

I like the way you did it better, it seems more simple. I was not aware of onPostRender. Thanks for the help!