gwt - 在 GWT RichTextArea 头中注入 css 样式表

Question

是否可以将样式表注入 GWT RichTextArea 的头部

好像我在正文中放置了一个样式元素，某些浏览器（例如 IE7）允许用户删除该节点。

Answer 1

我有同样的问题，这是在类构造函数中添加的解决方案：

richTextArea.addInitializeHandler(new InitializeHandler() {
        public void onInitialize(InitializeEvent ie) {
            document = IFrameElement.as(richTextArea.getElement()).getContentDocument(); 

            StyleElement se = document.createStyleElement();
            se.setType("text/css");
            se.setInnerHTML("some CSS"); 

            BodyElement body = document.getBody();
            body.getParentNode().getChild(0).appendChild(se);
        } 
  });

Answer 2

是的。但是你需要一个像gwtquery这样的库来操作 dom，或者编写一些 jsni。

• 我宁愿 gquery 因为它的简单性，它适用于所有浏览器。

import static com.google.gwt.query.client.GQuery.*;

// First attach the widget to the DOM
RootPanel.get().add(richTextArea);

// We only can manipulate the head, once the iframe document has been created, 
// and this happens after it has been attached. 
// Because richtTextArea uses a timeout to initialize we need a delay.
$(richTextArea).delay(1, 
    lazy()
      .contents()
      .find("head")
      .append("<style> body{background: red} </style>")
    .done());

• 使用 GWT + JSNI 你必须做这样的事情（虽然没有在所有浏览器中测试过）：

// First attach the widget to the DOM
RootPanel.get().add(richTextArea);

// We only can manipulate the head, once the iframe document has been created, 
// and this happens after it has been attached. 
// Using a timer because richtTextArea uses a timeout to initialize.
Timer insertCss = new Timer() {
  private native Element getHeadElement(Element iframe) /*-{
    return iframe.contentWindow.document.head;
  }-*/;

  public void run() {
    Element head = getHeadElement(richTextArea.getElement());
    Element style = DOM.createElement("style");
    style.setInnerText("body{background: yellow}");
    head.appendChild(style);
  }
};

// Schedule the timer
insertCss.schedule(1);

Answer 3

如果不想使用 CSS 文件，StlyeInjector可以直接插入 CSS。据我所知，它被放在了头上，但对于整个文档。