1

Google Closure Library エディター:デモ、ドキュメント。

編集可能領域は iframe です。編集可能領域のデフォルトのフォントを設定するにはどうすればよいですか? 現在は、ブラウザのデフォルト フォントです。編集可能領域**のコンテンツの周りにフォント タグを配置しないことを好みます。そうすれば、エディターで記述されたすべての HTML コンテンツを変更する必要なく、将来、自分の Web サイトのフォントを変更できます。

** つまり、次のようなものです。

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

私はこれだけを好むでしょう：

<b>content</b>

...次に、CSS を使用してエディタの編集可能領域を georgia フォントでスタイルします。そうすれば、データベース内の HTML コンテンツ (エディターによって生成される) にはハードコードされたフォントが含まれないため、将来フォントを変更することができます。

編集:編集可能領域に a のSeamlessField代わりに aを使用する必要がありますか?Field

4

1 に答える 1

1

参照したiFrameを作成するを呼び出すとmakeEditable()、フィールドはタイプのイベントを発生させます。そのイベントを聞くと、iFrameを引き出して、CSSスタイルシートへのリンク要素をトスできるので、エディターでコンテンツを簡単に変更できます。goog.editor.Fieldgoog.editor.Field.EventType.LOAD

これは、あなたを正しい軌道に乗せるはずの私のリスナーの1人に相当します。（イベントのターゲットであるかどうかは確認しませんでした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ファイルに、必要なスタイルを追加できます。フォントの変更など。

于 2012-12-13T18:06:26.363 に答える