2

RichTextArea フィールドの iframe にスタイルシートまたはスタイリング ルールを追加できるかどうか疑問に思っています。

CSS をいくつか調整してデフォルトのスタイルを調整する必要がありますが、RichTextArea は iframe 内に読み込まれているため、アプリケーション スタイルシートを介してターゲットにすることはできません。

4

5 に答える 5

0

まだ重要かどうかはわかりませんが、私は何か違うことをしました。

リッチテキストエリア用にトークン関数を作成し、データベースに保存していたトークンについては、「styles.css」で宣言したスタイルクラスで保存するだけです。

ステップバイステップはこのようなものです。スタイルシートを取得してトークンクラスを探し、iframe ヘッダーにスタイルを追加して、iframe のトークンクラスがスタイルされるようにします。

function styleRichtextareaIframe(id, themeClass, tokenClass, tokenSelectedClass) {
  setTimeout(function() {
    // iframe by id selected
    var $iframe = $("#" + id).find(".gwt-RichTextArea");

    var $head = $iframe.contents().find("head");
    var $body = $iframe.contents().find("body");

    var classNameToken = "." + themeClass + " " + "." + tokenClass;
    var classNameToken_selected = "." + themeClass + " " + "." + tokenSelectedClass;
    var fontClass = "." + themeClass + ".v-app, " + "." + themeClass + " " + ".v-window";

    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;

    var style = document.createElement('style');
    style.type = 'text/css';
    for (var i = 0; i < styleSheetsLength; i++) {
      var classes = styleSheets[i].rules || styleSheets[i].cssRules;
      for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == classNameToken) {
          style.appendChild(document.createTextNode(getClassFor(classes[x])));
        }
        if (classes[x].selectorText == classNameToken_selected) {
          style.appendChild(document.createTextNode(getClassFor(classes[x])));
        }
        if (classes[x].selectorText == fontClass) {
          style.appendChild(document.createTextNode(getClassFor(classes[x])));
        }

      }
    }

    function getClassFor(classObj) {
      if (classObj.cssText) {
        return classObj.cssText;
      } else {
        return classObj.style.cssText;
      }
    }

    //Adding the classes also to the body
    //of dourse you can change the output string to just give you the style class that you need.
    $body.addClass("v-app " + themeClass);
    $head.append(style);
  }, 200);
}

Vaadin RichTextArea コンポーネントの「問題」は、エディター フィールドが iframe 要素内にあるという事実だけでなく、他のすべての Vaadin コンポーネントと同様に、心に留めておく必要があるため、タイムアウト機能を挿入する必要がありました。 DOM の準備ができたときにコンポーネントを使用できないこと (コンポーネントは DOM にありません)。

これが誰かの助けになることを願っています。私の下手な英語で申し訳ありません。

乾杯。

于 2015-09-24T14:05:15.700 に答える
0

検索を続けた後、このディスカッションを見つけて解決策に導きました: https://groups.google.com/forum/#!msg/Google-Web-Toolkit/9kwAJNhnamY/1MVfFFRq8tUJ

結局、RichTextImpl* クラスをラップし、親クラスから initElement() メソッドを複製して、これらの行を挿入しました...

...Mozilla/Safari の場合:

_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem.contentWindow.document.designMode = 'On';
var doc = _this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem.contentWindow.document;
head=doc.getElementsByTagName('head')[0];
link=document.createElement('link');
link.setAttribute('rel',"stylesheet");
link.setAttribute('href',"/path/to/richtext.css" );
link.setAttribute('type',"text/css");
head.appendChild(link);

...IE の場合:

  var ct = "<html><head><style>@import url('/path/to/richtext.css');</style></head><body CONTENTEDITABLE='true'></body></html>" ;
  doc.write( ct );

... RichTextArea フィールドに読み込まれるスタイル シートを取得します。

于 2013-05-09T14:27:19.033 に答える