0

is it possible to inject a stylesheet into the head of a GWT RichTextArea

Seems as if i place a style element in the body, some browser e.g. IE7 allows the user to delete the node.

2
  • Why not just use a separate CSS file for styling? This seems like a really forceful way to do things.
    – Marconius
    Jul 4, 2013 at 19:52
  • because a seaperate file for styling would not work beacuse it's in an iframe
    – Tau Sand
    Jul 5, 2013 at 8:28

3 Answers 3

2

I had the same problem, here's the solution to add in the class constructor:

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);
        } 
  });
0

StlyeInjector can directly insert CSS if you don't want to use a CSS file. It gets put into the head as far as I can tell, but for the whole document.

0

Yes it is. But you need a library like gwtquery to manipulate the dom, or code some jsni.

  • I'd rather gquery because of its simplicity and it will work with all browsers.
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());
  • With GWT + JSNI you have to do something like this (not tested in all browsers though):
// 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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.