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

Question

Google Closure 库编辑:demo , documentation .

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

** 我的意思是这样的:

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

我更喜欢这个:

<b>content</b>

... 然后使用 CSS 将编辑器的可编辑区域设置为乔治亚字体。这样，我数据库中的 HTML 内容(由编辑器生成)将不包含硬编码字体，因此我可以在将来更改字体。

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

Answer 1

在 goog.editor.Field 上调用 makeEditable() 后，它会创建您引用的 iFrame，Field 会触发 goog 类型的事件。编辑器.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 文件中，您可以添加任何您想要的样式。比如你的字体改变。