Using javascript to fix CSS in Radio's WYSIWYG editor

Using javascript to fix CSS in Radio's WYSIWYG editor. I was a little hasty in my assessment that users have no options to fix the WYSIWYG editor toolbar when IE6 is in "standards-compliant" mode. I still think it is true that this cannot be fixed with CSS alone, but it can be fixed with javascript.

I've written a javascript that, when added to the Desktop Website template, fixes the non-compliant CSS attributes I described in my last post. This script can be easily enabled or disabled as a demonstration of this problem and its solution.

First, the Desktop Website template's DOCTYPE statement must be set to trigger IE6's "standards-compliant" mode.

In the #desktopWebsiteTemplate.txt file, check for the presence of a DOCTYPE statement at the top of the file. If one is present, it should look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Change the DOCTYPE statement to the following to force IE6 to use "standards-compliant" mode when rendering the Desktop Website, or add it to the top of the file (above the <html> tag) if it not present:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/strict.dtd">

The first line in this DOCTYPE statement is the same as the previous one except that the trailing ">" is removed, and the second line of text (the dtd file with trailing ">") is added right below it.

Insert the following script right below where the <%radio.macros.weblogEditBox ()%> appears in the Desktop Website template:

<script type="text/javascript">
<!--

  var fixToolbar=true
  var buttons=new Array(24,23,23,4,23,23,23,
      4,23,23,23,23,4,23);
  var left=0;
  var spanTags= document.getElementById('idBox')
    .getElementsByTagName('span');
  var imgTags= document.getElementById('idBox')
    .getElementsByTagName('img');
  if (fixToolbar) {

    document.getElementById('idBox').style.height="25px";

    for (var i=0;i<buttons.length;i++) {

      spanTags[2*i].style.display="inline-block";
      spanTags[2*i].style.height="26px";
      spanTags[2*i].style.width=buttons[i] + "px";

      spanTags[2*i+1].style.display="inline-block";
      spanTags[2*i+1].style.height="26px";
      spanTags[2*i+1].style.width=buttons[i] + "px";

      imgTags[i].style.left=-left + "px";

      left+=buttons[i];

    }
  }
//-->
</script>

Save the Desktop Website template. Open the Desktop Website in IE6. The WYSIWYG editor toolbar should be displayed now, even with IE6 rendering the Desktop Website in "standards-compliant" mode. (Try refreshing the page if it the toolbar does not display when the Desktop Website is first displayed.)

To demonstrate that this script is what is fixing the toolbar, disable the script to make to toolbar disappear again:

In the script just added to the #desktopWebsiteTemplate.txt file, change the value of "fixToolbar" from true to false (third line). Save the Desktop Website template and open the Desktop Website again. Now the WYSIWYG editor toolbar should be gone. (Try refreshing the page if it the toolbar is still displayed.)

To re-enable the script and display the WYSIWYG editor toolbar, change the value of "fixToolbar" back to true.

To restore the Desktop Website template back to its prior condition, delete the script and restore the DOCTYPE statement to the first DOCTYPE example above.

This script has only been tested in IE6.

I offer this script as a "workaround", an alternate solution in addition to Lawrence's suggestion of using a DOCTYPE that does not trigger IE6's "standards-compliant" mode.