How to set the default font in Google Closure Library rich text editor


Tags: css,iframe,google-closure,google-closure-library

Problem :

Google Closure Library editor: demo, documentation.

The editable area is an iframe. How can I set the default font of the editable area? Now it is the default font of the browser. I prefer not to put a font tag around the content in the editable area**. That way, I can change the font of my website in the future, without the need to modify every HTML-content written in the editor.

** What I mean by that is something like this:

<font size="2" face="georgia, serif"><b>content</b></font>

I would prefer just this:

<b>content</b>

... and then style the editable area of the editor with the georgia font using CSS. That way, the HTML-content (produced by the editor) in my database wouldn't contain a hard-coded font, so I could change the font in the future.

Edit: maybe I should use a SeamlessField instead of a Field for the editable area?



Solution :

Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull out the iFrame and toss in a link element to a CSS stylesheet so you can easily modify the content in your editor.

Here's the equivalent of one of my listeners that should get you on the right track. (I didn't check if the goog.editor.Field was the target of the event, but I assume it is).

some.namespace.Page.prototype.onEditorLoad_ = function(event) {
  var editor = /** @type {goog.editor.Field} */ (event.target);
  var iFrame = editor.getEditableIframe();
  if (iFrame) {
    var fieldDomHelper = editor.getEditableDomHelper();
    var documentNode =
      fieldDomHelper.getFrameContentDocument(iFrame).documentElement;

    var head = documentNode.getElementsByTagName(goog.dom.TagName.HEAD)[0];
    if (!head) {
      head = fieldDomHelper.createDom(goog.dom.TagName.HEAD);
      goog.dom.insertChildAt(documentNode, head, 0);
    }

    fieldDomHelper.appendChild(
      head,
      fieldDomHelper.createDom(
        goog.dom.TagName.LINK,
        { 'href': '/css/myCSS.css', 'rel': 'stylesheet', 'type': 'text/css' }
      )
    );
  }
}

Finally, in that CSS file, you can add whatever styling you want. Such as your font change.


    CSS Howto..

    How do you make an input element fill parent?

    How to prevent one table from obeying CSS rule

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    How to handle mouseover properly on a flipped div?

    How to avoid text wrap when the parent element has position absolute?

    How can I align the checkboxes in a form when using table display with CSS?

    How to select nth line of text (CSS/JS)

    How to make an element with fixed position relative to its parent, not the whole screen?

    How to design a CSS for a centered floating confirm dialog?

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How to overlay a dynamically selected image over a dynamically populated div

    How to add two lines of text inside a DIV

    How do I stop my :after content from blocking my anchor?

    How to make an element remain inline

    How to prevent the jump during css transition?

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    Show image in a div tag with it's real size using jquery/css/html

    How to create transparent text on non-transparent background

    How to use the plus sign process of css selectors in LESS?

    How to redefine a CSS class for the whole document?

    showing element out of scroll area

    How to get the same height on two Bootstrap columns? [duplicate]

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to center a child div with a smaller parent div

    Show Child Div Above Elements on Parent Div Level using z-index

    How to apply table cell formatting using CSS

    How to make the background image to fit into the whole page without repeating using plain css?

    How to update current css version in asp.net

    How to make video thumbnails like Facebook [CSS]