Restrict RichTextArea functionality ?

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

we wish to use the RichTextArea (Or if another component is better suited… tell) to allow
the users to add some formatting into long text areas.

The problem with the component is, that it is too powerfull :open_mouth:
In fact we would like to allow the endusers to only use the following features:

  • Bold
  • Italic
  • Bullet list
  • Numbered list

The reason for restricting it, is that 1. we also need to export these text parts into PDF and XLS files
and 2. we must prevent having some mixed fonts/sizes in the text.

How this could be acomplished ?

André

2

No supported way to disable specific formatting options exists, but you can hide individual buttons using CSS and attribute selectors. The only real problem with that is that attribute selectors are not supported in IE6, so if you need to support it, there’s no workaround I can think of, other than forking your own component/widget.

If you do end up using attribute selectors, be sure to filter any formatting on the server side as well, since the rich text area allows any HTML to be pasted inside it, and some keyboard shortcuts work also (e.g. CTRL+B for bold).

div[title="Toggle Underline"]
 {
   display: none;
}

You can check all the title values with Firebug and similar.

You can hide the second row selects easily with the following CSS:

.gwt-RichTextToolbar-bottom {
   display: none;
}
3

Hi,

I think the TinyMCE add-on might support such customizations:

http://vaadin.com/directory#addon/49

…it seems to have about zero documentation, though, so good luck :wink:
(afaik you’ll have to check the TinyMCE docs to see what’s supported and use setConfig(() to configure)

Best Regards,
Marc

4

Yes, that would also be a option, but we wish to stay on the core components as much as possible.

For another project this one (And the CKEditor add-on) will probably be interesting.

5

Fortunally IE6 is “dead” for this project :slight_smile:

So the html cleanup is still to be done.
Do you know how the component behaves with copy/paste from MS Office applications ?
They usually past a lot of garbage in rich text editors…

6

I try out the two suggestions here.

For using the attribute selector to hide individual buttons, I tried using the following in my css and it did not work:

div[title=“Toggle Underline”]
{ display: none;}

I then tried out following in my css, and it did not work either.

.gwt-RichTextToolbar-top div[title=“Toggle Underline”]
{ display: none;}

Please advise.

The suggestion on how to hide the second row in the toolbar, it works beautifully. Thank you.

7

For your suggestion to hide the bottom row of the toolbar of a RichTextArea, you advised using the following in the css:

                              .gwt-RichTextToolbar-bottom {   display: none;}

It works great. Of course, this applies to all RichTextArea’s in my app.

However, I have two RichTextArea’s in my app, and I would like to hide the bottom row of the toolbar in only one of them. How can I do that? Please advise.

8

Add (or set) the styleName on one of them, and then use that name in the CSS - e.g.

textArea.addStyleName(“no-toolbar”);

.no-toolbar .gwt-RichTextToolbar-bottom { display: none;}

Cheers,

Charles.

9

I tried it out, and it works beautifully. Thank you very much.

Could you comment on an earlier post of mine under the same thread regarding the use of attribute selector to hide a botton on the toolbar of RichTextArea.

I still could not get it to work.

10

.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton[title=“Toggle Underline”]
{
display: none;
}

Note : as Jouni pointed out, this will not work in IE6, as it does not support Attribute Selectors.

The reason that the example that Jouni posted did not work is that there is a more specific CSS selector in the Reindeer theme that overrides the display and size of the buttons.

I found this by using the Firebug plugin for Firefox, and fiddling with the demo sampler at http://demo.vaadin.com/sampler#LabelRich .

If you want/need to do anything more than trivial CSS manipulations with Vaadin, I would suggest it’s almost vital! I don’t use Firefox normally, and our application has to target IE, yet I use FireFox+Firebug to debug/investigate/tweak styesheets all the time. You’ll also need to get your head around CSS selectors - and I’m afraid there’s no avoiding that.

HTH,

Cheers,

Charles.

11

Thank you very much. It works.

Also thanks for the advise re use of Firebug.