CODEWITHSUNDEEP
gwtstylesheet
Tau Sand
Tau Sand

Reputation: 23

Inject css stylesheet in GWT RichTextArea head

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.

Upvotes: 0

Views: 895

Answers (3)

Tom
Tom

Reputation: 36

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

Upvotes: 2

Manolo Carrasco Moñino
Manolo Carrasco Moñino

Reputation: 9741

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

Upvotes: 0

Marconius
Marconius

Reputation: 713

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.

Upvotes: 0

Related Questions