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

LVL 16
hankknightAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jwmcpeakConnect With a Mentor Commented:
I created a test case with your JavaScript code and a document that contains an iframe and an element whose class is set with a class name and a URL, and it works in Firefox and Chrome.

Do you get an error? Do you have a link we can look at?

As a side note:

The indexOf() method returns the index of the first occurrence of the string you're looking for. If no match is found, indexOf() returns -1 (which is a truthy value). At the end of loadEditors(), you do a check for which editor to load, but you don't check of indexOf()'s return value. From the code, it looks like the simple editor is loaded where the full editor is supposed to be, and full editors are loaded where the simple editors are supposed to be.
0
 
hankknightAuthor Commented:
0
 
hankknightAuthor Commented:
I found the answer here, thank you.
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15483
0
 
jwmcpeakCommented:
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

0
 
hankknightAuthor Commented:
I like the way you did it better, it seems more simple.  I was not aware of onPostRender. Thanks for the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.