Setting display colors in Radio's HTML editor - Part 2

In Part 1, I showed how the foreground and background colors of Radio's HTML editor could be changed using a javascript. After trying out that script, Julie (Sexy Magick) suggested that it would be handy to be able to set the foreground and background colors from a drop-down box on the editor itself, so she could see how her posts would appear in various categories that have different colored themes. Part 2 demonstrates how this can be done, again with javascript.

The scripts provided below are for Internet Explorer users only. To install the scripts, copy all three scripts (which can also be downloaded here) and add them to your #desktopWebsiteTemplate, below the <%radio.macros.weblogEditBox ()%> macro.

If you are using a javascript to change the colors in the font color drop-down box (described here), place this javascript *after* that one. This script copies the colors from the font color drop-down box, so by placing this script after that one, the foreground and background color drop-down boxes will show the same colors as the ones in the font color box.

At the beginning of the first script, edit the fgColor value to set the foreground (text) color you want, and edit the bgColor value to set the background color of the HTML editor. This will set the colors that the editor will use when the Desktop Website is first opened, and it will be the colors displayed after a post is published.

Save the Desktop Website template and open the Desktop Website in your browser. The new colors should be immediately visible in the HTML editor window. If you no longer want to use this script, simply delete it from your Desktop Website template.

As with the script described in Part 1, this script does not alter the appearance of published posts on your weblog - it only changes how they look in the editor window. No HTML code or style attributes are added to the text of your posts.

Note to Julie: Thanks for your suggestions on improving this script and for beta-testing the script for me. You can see Julie's post about her testing here.

Here is a screen shot of the HTML editor with the new drop-down boxes. The editor's foreground color is set to white and the background color is set to darkblue:

Here are the scripts to be added to the Desktop Website template:

Internet Explorer only:

  <script type="text/javascript">
    <!-- Begin hiding from older browsers 

      // Set colors to use in HTML editor on startup here
      var foreColor = '#000000';
      var backColor = '#FFFFFF';

      // Body tag of HTML document in editor
      var startBodyTag = '<body style=\"font-family: verdana, ' + 
        'sans-serif; font-size: 12px; margin-top: 3px; ' + 
        'margin-bottom: 3px; margin-left: 3px; margin-right: 3px;';
      var endBodyTag = '\"' + String.fromCharCode (62);

      // Increase height of div containing drop-down boxes
      document.getElementById('tb2').style.height = '45px';

      // Get reference to existing font color drop-down box
     var fontColorBox = document.forms(0).elements(5);

      // Function to perform actual switching of colors
      function chgScreenColors () {
        sHeader = startBodyTag + 
          ' color: ' + foreColor + ';' + 
          ' background: ' + backColor + ';' + endBodyTag;
        sContents = idEdit.document.body.innerHTML;
        idEdit.document.open ();
        idEdit.document.write (sHeader);
        idEdit.document.close ();
        idEdit.document.body.innerHTML = sContents;
        }

      // Make a copy of font color drop down box
      var foreColorBox = fontColorBox.cloneNode(true);
      var backColorBox = fontColorBox.cloneNode(true);

      // Set id of new drop down boxes 
      foreColorBox.id = 'fgColorBox';
      backColorBox.id = 'bgColorBox';

      // Set caption of new drop down boxes
      foreColorBox.options(0).text = 'Foreground...';
      backColorBox.options(0).text = 'Background...';

      // Add color 'white' to end of fgBox option list
      newOption = document.createElement('option');
      foreColorBox.options.add(newOption);
      newOption.text = 'white';
      newOption.style.color = 'white';
      newOption.style.background = 'black';

      // Add color 'white' to end of bgBox option list
      newOption = document.createElement('option');
      backColorBox.options.add(newOption);
      newOption.text = 'white';
      newOption.style.color = 'white';
      newOption.style.background = 'black';

      // Insert new drop-down boxes into form
      fontColorBox.insertAdjacentHTML("AfterEnd",'&nbsp;');
      fontColorBox.insertAdjacentElement("AfterEnd",backColorBox);
      fontColorBox.insertAdjacentHTML("AfterEnd",'&nbsp;');
      fontColorBox.insertAdjacentElement("AfterEnd",foreColorBox);
      fontColorBox.insertAdjacentElement("AfterEnd",document.createElement('br'));

      // Initalize HTML document with starting colors
      sHeader = startBodyTag + 
        ' color: ' + foreColor + ';' + 
        ' background: ' + backColor + ';' + endBodyTag;
      idEdit.document.open ();
      idEdit.document.write (sHeader);
      idEdit.document.close ();

    //End hiding-->
  </script>

  <script for=fgColorBox event=onchange type="text/javascript">
    <!-- Begin hiding from older browsers 
      if (!bMode) {
        alert (strErr); idEdit.focus ();
        this.selectedIndex=0;
        return;
        }
      foreColor = this[this.selectedIndex].style.color;
      chgScreenColors ();
      this.selectedIndex=0;
      idEdit.focus ();
    //End hiding-->
  </script>

  <script for=bgColorBox event=onchange type="text/javascript">
    <!-- Begin hiding from older browsers&nbsp;
      if (!bMode) {
        alert (strErr); idEdit.focus ();
        this.selectedIndex=0;
        return;
        }
      backColor = this[this.selectedIndex].style.color;
      chgScreenColors ();
      this.selectedIndex=0;
      idEdit.focus ();
    //End hiding-->
  </script>