Как установить шрифт по умолчанию в редакторе форматированного текста библиотеки Google Closure

Question

Редактор библиотеки Google Closure: демонстрация, документация.

Редактируемая область - это iframe. Как я могу установить шрифт по умолчанию для редактируемой области? Теперь это стандартный шрифт браузера. Я предпочитаю не размещать тег шрифта вокруг содержимого в редактируемой области **. Таким образом, я могу изменить шрифт моего сайта в будущем, без необходимости изменять каждый HTML-контент, написанный в редакторе.

** Что я имею в виду, что-то вроде этого:

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

Я бы предпочел именно это:

<b>content</b>

... а затем стилизуем редактируемую область редактора шрифтом georgia с помощью CSS. Таким образом, HTML-контент (созданный редактором) в моей базе данных не будет содержать жестко закодированного шрифта, поэтому я мог бы изменить шрифт в будущем.

Изменить: может быть, я должен использовать SeamlessField вместо Field для редактируемой области?

Answer 1

Как только вы позвоните makeEditable() на goog.editor.Field, который создает iFrame, на который вы ссылались, поле генерирует событие типа goog.editor.Field.EventType.LOAD, Если вы слушаете это событие, вы можете извлечь iFrame и вставить элемент ссылки в таблицу стилей CSS, чтобы вы могли легко изменять содержимое в вашем редакторе.

Вот эквивалент одного из моих слушателей, который должен вывести вас на правильный путь. (Я не проверял, если goog.editor.Field был целью мероприятия, но я предполагаю, что это так).

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' }
      )
    );
  }
}

Наконец, в этот CSS-файл вы можете добавить любой стиль, какой захотите. Например, изменение шрифта.