I am trying to use a gwt tiny mce (http://code.google.com/p/tinymce-gwt/) widget with vaadin.
I managed to get the tiny mce editor on the screen, but there seems to go something wrong when setting/getting the editors content.
The editors content only shows up when I refresh the browser screen. When I edit the text and want to save it to my application, I always get the old content.
This is my code:
public class TinyMCE extends AbstractComponent {
private String value;
@Override
public String getTag() {
return "tinymce";
}
@Override
public void paintContent(PaintTarget target) throws PaintException {
super.paintContent(target);
target.addVariable(this, "text", getValue());
}
@Override
public void changeVariables(Object source, Map variables) {
super.changeVariables(source, variables);
if (variables.containsKey("text")) {
String newValue = (String) variables.get("text");
final String oldValue = getValue();
if (!oldValue.equals(newValue)) {
setValue(newValue);
}
}
}
public void setValue(String value) {
this.value = value;
}
public String getValue() {
return this.value;
}
}
and
public class VTinyMCE extends gr.open.client.TinyMCE implements Paintable, Field {
public static final String TAGNAME = "tinymce";
public static final String CLASSNAME = "v-" + TAGNAME;
/** Component identifier in UIDL communications. */
protected String id;
/** Reference to the server connection object. */
ApplicationConnection client;
private boolean immediate = true;
/**
* The constructor should first call super() to initialize the component and
* then handle any initialization relevant to Vaadin.
*/
public VTinyMCE() {
super();
setStyleName(CLASSNAME);
}
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
if (client.updateComponent(this, uidl, true)) {
return;
}
this.client = client;
id = uidl.getId();
if (uidl.hasVariable("text")) {
setText(uidl.getStringVariable("text"));
}
}
@Override
public void setText(String newText) {
if (newText.equals(super.getText()))
return;
super.setText(newText);
if (id == null || client == null)
return;
client.updateVariable(id, "text", newText, immediate);
}
}
Can someone point me out what I’m overlooking here?
might be called immediately when data is received from the server (potentially causing a loop). However, this happens if the component is “immediate” and should not be cause of this.
I don’t know TinyMCE, but took a quick look at your code and the TinyMCE examples.
I don’t see what is wrong with sending content from the server to the editor with your code and updateContent().
However, I believe nothing in TinyMCE calls setText() automatically, so you might need to explicitly add the save functionality on the GWT widget side. This is done e.g. in
TinyMCE AJAX example , sending that to the server in response to a “Save” button click. I’m not sure how that is done with the TinyMCE GWT widget, which is written for applications where the logic resides on the client side.
Due your post and the fact that I have some years ago used TinyMCE in various projects, I found a motivation to build a some level of TinyMCE integration for Vaadin. At the same time it was kind of a validation that all things work in our just a moment ago released 6.2 version.
I first looked at the tinymce-gwt project you mentioned, but quite quickly decided to drop its usage. Quite quickly I decided to start from scratch (it was old and I was not happy with its architecture).
So go and update to 6.2 and drop jar from here to your eclipse workspace:
Tiny MCE looks excellent. This is exactly what I need.
I tried it but I got the error message:
Widgetset does not contain implementation for com.vaadin.tinymceeditor.TinyMCETextField. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:
I must miss some steps...
Here is what I did: download the jar files and put it in the web-INF lib directory. Make sure the build path includes this library. Change a usage of "RichTextArea" to "TinyMCETextField". The app compiles fine and runs. But it shows the message when I try to invoke it.
Please let me know what I missed.
You help is much appreciated.
you’ll need to recompile the widgetset as well, as TinyMCE widget for Vaadin contains non-standrad client part. You’re using Vaadin 6.2 I guess, so this process is almost automated, please refer the latest Book Of Vaadin, it contains information on how to add your own widgets and build widgetsets. If you’re using Eclipse as IDE and downloaded Vaadin plugin for it - the process should be automated.
We’re using the tiny mce editor within vaadin, based on the implementation example by Matti. It seemed to be working fine in our application.
However, when we try to implement the editor in a subwindow of the mainwindow, we start getting strange behaviour. At first, everything seemed to be working but when testing, the dropdowns for setting font, font size and formatting don’t seem to work. The other controls do work.
Does anyone have any idea why we’re getting this problem? We’re using exactly the same implementation in mainwindows and there, everything works fine.
Is the problem related to the fact that only one level of subwindows is supported? Is the dropdown regarded as an extra layer/subwindow that opens and the events of that window are lost?
My guess would be that z-indexes used by tinymce for those dropdowns are too low. If this assumption is true - it is easy to correct by overriding them in css.
Thanks for the input. We already changed the implementation to bypass the problem (basically, we don’t use the popup window anymore).
However, we have 2 other issues with the integration between the tiny mce editor and vaadin.
The tiny mce editor has the option to see (and edit) the html code. However, if you use this (and don’t do any editing directly in the textfield), vaadin doesn’t register the changes done. What events is vaadin relying on the register changes in a field?
The second issue is that when using the fullscreen mode of the editor, the vaadin popup windows don’t get past it anymore. I’ve already checked the z-indexes (5 for the editor in fullscreen, 3000 for the popup-window) so there’s not the issue I think. But what could be the problem?
Have you tried to search or ask tiny mce forums about this issue? Tried in another browser? If I understood right this is a tiny mce editor issue, more than Vaadin wrapper related.
BWT. I’d be happy to include you patches in the component when you get them finished.
I tryed to find information on how to solve the issue of the etitor that scroll down.
no body helped.
i found that strange thing
when i load the component it present a div like this
then, i call a function to insert some text into the editor, what i get after the data are inserted correctely into the editor, is this div
there is no “display: none;” directive.
that make the div use his 280 X 1680 px on the screen.
Is there a way to handle this situation ?
It seams also that tha div is the one inserted by the code
public VTinyMCETextField() {
// TODO This example code is extending the GWT Widget class so it must
// set a root element.
// Change to a proper element or remove this line if extending another
// widget.
setElement(Document.get().createDivElement());
// This method call of the Paintable interface sets the component
// style name in DOM tree
setStyleName(CLASSNAME);
}
