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 to use font-awesome from server

    How to use the CSS :not selector for classes further up the DOM tree

    How to make a background color white on drop down

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How to catch this nth-child() with css

    How do I style forms using CSS

    How do I center 2 divs in HTML Bootstrap?

    How to style CSS for input box's width as a percentage when it has border and padding?

    CSS - How to overlap elements over everything but each other? (No margin/padding etc)

    How do I use CSS transitions to fixed position a scaled element?

    How to align both vertically and horizontally in CSS?

    CSS + Show Animated GIF while Loads

    Django + Mac osx how to use less css?

    How to change text from black to white upon hover on background black?

    How to reduce this css code [duplicate]

    How to use CSS Overflow: hidden to avoid the parent container grow

    How to draw the following shape using CSS3 [duplicate]

    How do I center my logo image to another div in CSS horizontally and vertically?

    How to set border's thickness in percentages?

    How can I hide a div when content is not displayed

    How to keep a sticky menu contained inside a floating sidebar?

    How to apply CSS after adding elemnts with jquery

    How to add border between td's in which are in different tr's?

    Control Show/Hide multiple DIV using CSS, Javascript, and Anchor without unique ID

    How do I align an item to the right inside a flex container?

    How to change the CSS of page dynamically based on value?

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    Gulp : How to copy multiple files and keep the folder structure

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How to Add flexibility to SASS for another color