A component to enter formatted text and buttons

I need to have a component in my Vaadin 7 app, that would do the following:

  1. edit formatted text - the provided RichTextEditor would do
  2. Add buttons into the content, and define their attributes. I’d really like to do this by dragging and dropping within the Vaadin UI


  1. View the fomatted html text with the buttons on it
  2. When pressing the buttons, emmit events
    to the server
    that would get actioned as per button attributes

So essentially I 'd like a component that would allow the user to edit/define Vaadin components comprising of formatted text and buttons. Think CKEditor but the buttons would have Vaadin listeners (as opposed to doing form actions).

Any idea if I can find anything like this or how would I go about building it (Vaadin widget, javascript component …)?


I’m fairly sure that something like this does not exist as an add-on yet but you could try creating it as an add-on.
You should probably make it as a custom Widget as i don’t think you can realize it in pure Javascript and when you still need some JavaScript in your widget you can embedd it in your Client side GWT Widget later like
I don’t have an exact plan on how you could do it and i certainly don’t know every helpfull GWT Widget by heart but i had some ideas when looking at this:
You probably want/should do this all mainly on the Client side in GWT. You could look at the Client side implementation of the RichTextEditor and see if you can maybe use it with some type of GWT Drag and Drop Component/Wrapper/Thing (…I said i don’t know many GWT components). What might be a good way of doing it if it’s possible would be to have an area where you drag and drop Buttons and Text(which you can edit by a GWT or Vaadin TextEditor) in the Area and when you’re finished you get the result as html. That would be nice in my opinion but i don’t know how difficult that is or if it’s even possible at all given the existing GWT,Vaadin and JavaScript Objects.

You can view the html text either from serverside with a vaadin component or from the GWT Widget using somthing like the Html class. For listening to server presses you could for example have the buttons which you added call a JavaScript function passing an id to identify the button. You then can catch that call in your GWT Widget and pass it to a Listener on the server side. This part should not be that difficult if the edit part works.

This sounds to me like quite a big project requiring a lot of trial and error to find the best combination of objects to edit the html and i’m sorry to not be able to help you further but i hope i didn’t scare you and that you will at least try it.