如何在 Google Closure Library 富文本编辑器中设置默认字体答案

【问题标题】：How to set the default font in Google Closure Library rich text editor如何在 Google Closure Library 富文本编辑器中设置默认字体
【发布时间】：2012-12-12 22:50:21
【问题描述】：

Google Closure 库编辑器：demo、documentation。

可编辑区域是 iframe。如何设置可编辑区域的默认字体？现在它是浏览器的默认字体。我不想在可编辑区域的内容周围放置字体标签**。这样，我以后可以更改网站的字体，而无需修改编辑器中编写的每个 HTML 内容。

** 我的意思是这样的：

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

我更喜欢这个：

<b>content</b>

... 然后使用 CSS 为编辑器的可编辑区域设置 georgia 字体的样式。这样一来，我数据库中的 HTML 内容（由编辑器生成）就不会包含硬编码的字体，因此我可以在以后更改字体。

编辑：也许我应该在可编辑区域使用SeamlessField 而不是Field？

【问题讨论】：

标签： css iframe google-closure google-closure-library

【解决方案1】：

一旦您在 goog.editor.Field 上调用 makeEditable()（这会创建您引用的 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 文件中，您可以添加任何您想要的样式。比如你的字体变化。

【讨论】：