Yahoo.widget.Editor - How to configure font size of text.

Question

I am using the YUI Rich Text Editor (YAHOO.widget.Editor), and I got it working fine, except for one thing. I cannot figure out how to configure the font size of the text that I type in the editor box (input type="textarea"). I want that text to be 150%. I know that I need a CSS rule of the form:

some-YUI-related-selector {
  font-size: 150%; 
}

but I cannot figure out the identity of "some-YUI-related-selector".

I'd appreciate any help I can get.

Thanks, Jay

More information:

I want my web to display large fonts, so I used a CSS style for the div in question as follows:

div.newsform {
  font-size:120%;
}

div.newsform input {   
  font-size:120%;
}
input#newsgoals {
  font-size:150%;
}

The HTML page snippet in question is:

<div class="newsform">
  <p>Some text</p>
  <form>
    <input type="text" name="sname"  style="width:353px"/>
    <input type="textarea" id="newsgoals" name="newsgoals" ></input><br/>
    <input type="submit" value="Add" />
  </form>
</div>

I bind the YUI Editor in a Javascript snippet at the bottom of the web page as follows:

<script>
var myNewSEditor = new YAHOO.widget.Editor('newsgoals', {
    height: '300px',
    width: '440px',
    dompath: false,
    animate: true,
    css: YAHOO.widget.SimpleEditor.prototype._defaultCSS, // + 'html { font-size:130%; }',
// { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
    toolbar: {
        titlebar: 'Write Your Goals Here',
        buttons: [
            { group: 'textstyle', // label: 'Font Style',
                buttons: [
                { type: 'push', label: 'Bold', value: 'bold' },
                { type: 'push', label: 'Italic', value: 'italic' },
                { type: 'push', label: 'Underline', value: 'underline' },
                { type: 'separator' },
                { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                    menu: [
                        { text: 'Arial', checked: true },
                        { text: 'Arial Black' },
                        { text: 'Comic Sans MS' },
                        { text: 'Courier New' },
                        { text: 'Lucida Console' },
                        { text: 'Tahoma' },
                        { text: 'Times New Roman' },
                        { text: 'Trebuchet MS' },
                        { text: 'Verdana' }
                    ]
                },
                { type: 'spin', label: '22', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                { type: 'separator' },
                { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },

                { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }
                ]
            }
        ]
    }
});
myNewSEditor.render();


</script>

The everything inside the div (class="newsform") renders the fonts at 120% large except the YUI Editor, which continues to render very small. If I used the web page without the YUI editor, the text area (input#newsgoals) renders properly at 150%.

I was able to configure colours and font sizes in the tool bar of the YUI Editor, but not in the text area box.

I even tried configuring the 'css:" attribute in the toolbar and then adding my CSS rule to _defaultCSS (as per the YUI Editor documents), but it didn't work.

Answer 1

Jay,

Dav Glass, the author of this component, provides great help to his users over at the YUI Library forums: http://yuilibrary.com/forum/

If you don't get an answer here, definitely try posting over there.

-Eric

Answer 2

Woohoo! Thanks Eric Miraglia. The pointer to Dav Glass' forum got me where I needed to go.

For some reason, I had found the css: configuration parameter which was correct, but I had done something else wrong and that caused it to fail. The correct answer is to put the following line where I have the css: when I call "new Yahoo.widget.Editor()" :

css: YAHOO.widget.SimpleEditor.prototype._defaultCSS  + 'body { font-size:130%; background-color:red;color:white;}'

That was enough to get the font-size and editor background changed to what I want.