RichTextArea styles
evgenyk
I want to define styles for text inside of RichTextArea.
For example I want to define default font size and margins for tag
<p>.
Also I want to remove RichTextArea iframe borders.
The following hack doesn't help for IE6:
DOM.setElementProperty(richTextArea.getElement(), "frameborder", "0");
Can someone help me with it?
thanks
The Dave
different default margins, padding, etc. to the contents of the editor
when the user first enters text into it.
After some fiddling around with the RichTextArea field, I found a
workaround solution, which I've tested on IE 7.0.6000.16448. When I
initialize an empty RTA, I run this code:
textArea.setHTML( "<p style=\"margin: 0px 0px 0px 0px; font-size: xx-
large;\" />" );
This applies an inline style to the area's contents, which is then
adopted as the style for new entry into the box. Note that only an
inline style (via the 'style' tag) works here--use of the 'class' tag
fails, since apparently the iframe of the RTA is unaware of the
stylesheet for the page in which it is contained.
Anyway, the adjustment of any other styles in the RTA will probably
need to be done manually (i.e., you'll have to filter through the
contents of the RTA and modify styles on elements yourself).
Note that this workaround works gracefully with Firefox (2.0.0.6).
Although the styles are not applied to input in a Firefox RTA, the
code doesn't cause it to break.
Really, the right way to handle this would be to add a 'setMargin'
function to one of the formatter interfaces associated with the RTA.
This would permit programmatic modification of the RTA's contents in a
way that's consistent with existing interfaces.
--Dave
On Jun 25, 8:58 am, evgenyk <evge...@gmail.com> wrote:
> Hello!
>
> I want to define styles for text inside ofRichTextArea.
> For example I want to define default font size and margins for tag
> <p>.
>
> Also I want to removeRichTextAreaiframe borders.
Thierry Ruiz
Dave, your solution is ok, I've been through the same issue. I solved
it by injecting a
stylesheet in the iframe document. This a bit tricky cause I couldn't
find a
crossbrowser way to do so. I had to wrapp the
RichTextAreaImplXXX.initElement() to
add a stylesheet:
public class WrappedRichTextAreaImplMozilla extends
RichTextAreaImplMozilla {
public native void initElement() /*-{
// Some browsers don't like setting designMode until slightly
_after_
// the iframe becomes attached to the DOM. Any non-zero
timeout will do
// just fine.
var _this = this;
setTimeout(function() {
// Turn on design mode.
_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem.contentWindow.document.designMode
= 'On';
// my changes
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',"richtext.css" ); // IFRAME
stylesheet here
link.setAttribute('type',"text/css");
head.appendChild(link);
// -- my changes
// Initialize event handling.
_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImplStandard::initEvents()
();
// Send notification that the iframe has reached design
mode.
_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImplStandard::onElementInitialized()
();
}, 1);
}-*/;
and for IE
public class WrappedRichTextAreaImplIE6 extends RichTextAreaImplIE6 {
public native void initElement() /*-{
var _this = this;
window.setTimeout(function() {
var elem =
_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem;
var doc = elem.contentWindow.document;
var ct = "<html><head><style>@import url('" + richtext.css" +
"');</style></head><body CONTENTEDITABLE='true'></body></html>" ;
doc.write( ct );
// Initialize event handling.
@com.google.gwt.user.client.ui.impl.RichTextAreaImplIE6::initEvents(Lcom/
google/gwt/user/client/Element;)(elem);
// Send notification that the iframe has reached design mode.
_this.@com.google.gwt.user.client.ui.impl.RichTextAreaImplStandard::onElementInitialized()
();
}, 1);
}-*/;
At the end you have to create your own the com/google/gwt/user/
RichText.gwt.xml in the resources directory
to force GWT compiler to take the wrapped implementation.
Bit complicated though, but it works . Waiting such functionnality to
be added to the RichTextArea widget.
Thierry.
doubtintom
Are you saying you put this code in a local copy of GWT and run a
patched version? Or do you do these extensions in your project? I'm
running other patches anyway, just trying to follow your steps
closely.
Mind showing your RichText.gwt.xml to save a littel time for those of
us trying this out?
Yes, I believe this is a real need for GWT!
Tom
Thierry Ruiz
Hi Tom,
Yes Tom it's just a wrapping technic, I'm not patching the GWT code,
I just use my own RichText.gwt.xml to use my wrapper classes.
I put it in my project "resources" directory so that GWT compiler
uses the wrapper classes.
--------- RichText.gwt.xml ---------------------
<module>
<inherits name="com.google.gwt.core.Core" />
<inherits name="com.google.gwt.user.UserAgent" />
<inherits name="com.google.gwt.i18n.I18N" />
<!-- IE-specific implementation -->
<replace-with class="your.package.WrappedRichTextAreaImplIE6">
<when-type-is
class="com.google.gwt.user.client.ui.impl.RichTextAreaImpl" />
<when-property-is name="user.agent" value="ie6" />
</replace-with>
<!-- Mozilla-specific implementation -->
<replace-with
class="your.package.WrappedRichTextAreaImplMozilla">
<when-type-is
class="com.google.gwt.user.client.ui.impl.RichTextAreaImpl" />
<any>
<when-property-is name="user.agent" value="gecko1_8" />
<when-property-is name="user.agent" value="gecko" />
</any>
</replace-with>
.... same for Safari and Opera.
</module>
Note that I did not wrote Safari and Opera wrapper yet, but it seems
that the initElement()
impl is the same as for Mozilla. Not tested though.
Hope this help.
Thierry.