Tweaking Radio's HTML editors (both of them!)

| 9 Comments

In the Radio discussion forum, Xavier Caballe asked the following:

Is there any way to change the fonts used by the built-in HTML editor? Specifically I'd like to change Courier to Courier New, since this renders much better.

Radio offers no option for this. The fonts listed in the HTML editor drop-down box are hard-coded in radio.root. To change them directly, it would be necessary to edit the code directly. This option is not recommended, as a radio.root update could wipe out any changes made there, and any mistakes made in the editing could break the HTML editor.

A safer alternative to editing the code in radio.root is to use a javascript in the #desktopWebsiteTemplate.txt file to change the values in the font drop-down box after Radio has rendered the HTML editor.

In the #desktopWebsiteTemplate.txt file, locate the <%radio.macros.weblogEditBox ()%> macro, which is what draws the HTML editor. Insert the following script into the template immediately below the weblogEditBox macro if you are using Internet Explorer:

<script type="text/javascript">
<!--
  document.forms(0).elements(3).options(1).text = 'Arial';
  document.forms(0).elements(3).options(1).value = 'Geneva,Arial,Sans-Serif';

  document.forms(0).elements(3).options(2).text = 'Verdana';
  document.forms(0).elements(3).options(2).value = 'Verdana,Geneva,Arial,Helvetica,Sans-Serif';

  document.forms(0).elements(3).options(3).text = 'Time';
  document.forms(0).elements(3).options(3).value = 'Times New Roman,Times,Serif';

  document.forms(0).elements(3).options(4).text = 'Courier';
  document.forms(0).elements(3).options(4).value = 'Courier, Monospace';
//-->
</script>

If you are using Mozilla or Mozilla Firebird, insert this script into the template immediately below the weblogEditBox macro:

<script type="text/javascript">
<!--
  document.editPostForm.fontname.options[1].text = "Arial";
  document.editPostForm.fontname.options[1].value = "Arial";

  document.editPostForm.fontname.options[2].text = "Courier";
  document.editPostForm.fontname.options[2].value = "Courier";

  document.editPostForm.fontname.options[3].text = "Times New Roman";
  document.editPostForm.fontname.options[3].value = "Times New Roman";
//-->
</script>

In their current form, the statements in both scripts merely put the same fonts in the drop-down box as what Radio does. To change a font listed in the drop-down box, edit the appropriate pair of lines corresponding to the drop-down entry you wish to change.

In each pair of statements, the first statement (ending in .text) is what the drop-down box displays to the user. The second statement (ending in .value) is the name of the font(s) that the editor will actually place in your HTML code.

In answer Xavier's question, you would edit the 4th pair of statements in the Internet Explorer javascript if you're using Internet Explorer:

  document.forms(0).elements(3).options(4).text = 'Courier New';
  document.forms(0).elements(3).options(4).value = 'Courier New, Monospace';

And if you're using Mozilla / Mozilla Firebird, you would edit the 2nd pair of statements in the Mozilla / Mozilla Firebird javascript:

  document.editPostForm.fontname.options[2].text = "Courier New";
  document.editPostForm.fontname.options[2].value = "Courier New";

Save the #desktopWebsiteTemplate.txt file, and open the Desktop Website in your browser. Any changes made to the font drop-down box should be immediately visible. If at any time you decide you no longer want to use the script, simple delete it from the #desktopWebsiteTemplate.txt file.

9 Comments

Cool thanks..I have another way to change it but your way is definetly much much much easier :)

So what is your way, Julie??

David, First of all... thanks for the hack. In order to make it work be sure to do not left any space on the font list:

document.forms(0).elements(3).options(4).value = 'Courier New,Monospace';

No problem, Xavier. Honestly, the way I wrote the line you mentioned is the way Userland coded it. It doesn't surprise me that it may need to be fixed a little more.

If you happen to see this comment, could you translate your post on your blog about this hack?
(http://www.caballe.com/2003/09/18.html#a565)

Sure not problem. This is the translation:
"This may be of interest of Radio Userland's users: a couple of days ago I asked how to change the fonts on the WYSIWYG editor. Today I've got a complete guide on how to do it. Thanks David!"
:-)

I'm assuming that I can also change the drop down font colors with the same basic javascript with a little modification - should it be:
document.forms(0).elements(4).options(17).style = 'color:mediumvioletred';
document.forms(0).elements(4).options(17).value = 'mediumvioletred';
or
document.forms(0).elements(4).options(17).style.color = 'mediumvioletred';
document.forms(0).elements(4).options(17).value = 'mediumvioletred';
assuming that element refers to the box number
options # is the color # I want to change

thanks

There's two problems in your example, Julie:

1. The font color drop-down box is referenced by elements(5), not (4). It's two boxes over from the font name, so it's reference number will be two numbers higher.

2. options(17) is a new option, not an existing one.

If you want to change an existing option, then your second example is the correct code (using the correct element and appropriate option number):

document.forms(0).elements(5).options(11).text = 'mediumvioletred';
document.forms(0).elements(5).options(11).style.color = 'mediumvioletred';

The above example should change the existing color "green" to "mediumvioletred".

To add a new color, which options(17) would be, you have to create the option first, then set its color:

document.forms(0).elements(5)[17] = new Option('mediumvioletred');
document.forms(0).elements(5).options(17).style.color = 'mediumvioletred';

The "new Option" sets the .text property at the time the option is created, so a statement to set it separately is not necessary.

Hope this helps!

Why is there no font Verdana in the Mozilla-editor and shold it be possible to 'repair' that with your macro?

m.

There is no Verdana font in the Mozilla editor because Userland didn't put one there. :) Yes, it is possible to 'repair' (add) the Verdana font to the font drop-down box. Add the following script to your Desktop Website template just after the <%radio.macros.weblogEditBox ()%> macro:

<script type="text/javascript">
  <!--
    document.editPostForm.fontname.options[4] = new Option('Verdana')
    document.editPostForm.fontname.options[4].value = 'Verdana, Arial, Helvetica, Sans-serif';
  //-->
</script>

If you want to set the default font used by the Mozilla editor, you can use the following in place of or in addition to the above script:

<script type="text/javascript">
  <!--
    var editFrame = document.getElementById('edit');

    // Function to set HTML editor default font
    function loadFont () {
      var editDoc = editFrame.contentWindow.document;
      var editDocStyle = editDoc.body.style;
      editDocStyle.fontFamily = 'verdana,arial,helvetica,sans-serif';
      editDocStyle.fontSize = '12px';
      }

    // Wait for about:blank page to load
    editFrame.contentWindow.addEventListener
        ('load',loadFont, false);
  //-->
</script>

The above is a modifed version of the script I described in my "Setting display colors in Radio's HTML editor - Part 1" post. The values for editDocStyle.fontFamily and editDocStyle.fontSize can be edited to suit your preferences.