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。据我所知，它被放到了头脑中，但对于整个文件。

在GWT RichTextArea头中注入css样式表

3 个答案: