Solved

JavaScript Error: Adding CSS to TinyMCE

Posted on 2009-03-30
5
410 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:hankknight
  • 3
  • 2
5 Comments
 
LVL 4

Accepted Solution

by:
jwmcpeak earned 500 total points
ID: 24020122
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
 
LVL 16

Author Comment

by:hankknight
ID: 24020503
0
 
LVL 16

Author Comment

by:hankknight
ID: 24022375
I found the answer here, thank you.
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15483
0
 
LVL 4

Expert Comment

by:jwmcpeak
ID: 24022433
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
 
LVL 16

Author Comment

by:hankknight
ID: 24022665
I like the way you did it better, it seems more simple.  I was not aware of onPostRender. Thanks for the help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript waiting 14 69
jQuery Syntax 2 47
Angular - following an example but mine partly works 17 45
Window.Open() is showing a blank page 9 15
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now