1

Pretty straight-forward question, but I can't find this anywhere. I'm using WicketStuff's TinyMCE to make a Rich Text Editor in my application, and can't find anywhere how to get the input from the text area. For brevity's sake, the following is a simplified version of the code I'm using.

    private String input;
    ...

    TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple);

    TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input"));
    textArea.add(new TinyMceBehavior(settings));

    form.add(textArea);

Using this, I would expect the usual manner to simply use my String 'input' since it's set as the model. This always results in null as the model isn't being updated.

I tried using the auto-save plugin in case it was expecting the save button to be clicked (which doesn't update the model either), and neither worked. The only thing I've been able to do to get the user's input is to add a HiddenField, with a new model, and make a JavaScript call like 

document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent();

but this has led to other problems with trying to call the JS in the desired place and to get it to work properly. I feel this shouldn't be necessary anyways, as surely someone must have implemented a method to get the contents of the text area being used.

Any help would be greatly appreciated.

brent_aof
  • 141
  • 3
  • 12

2 Answers2

2

Thanks to a blog post at Nevermind Solutions, the way to get the model updated is to add the following JavaScript to the form's submitting button:

onclick="tinyMCE.triggerSave(true,true);"

My text area is inside a panel with the button outside of the panel, so it doesn't directly work for me. The trick was to add the JavaScript call to the button's onSubmit, move the logic into the onAfterSubmit, and to make the button MultiPart so that it could call the save trigger before doing the other logic associated to the model.

Hope this might help some others in the future.

brent_aof
  • 141
  • 3
  • 12
1

You have to add a modifier to the submit button so that the model can update.

AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) {
    @Override
    public void onSubmit(AjaxRequestTarget target, Form<?> form) {
        doSomething();
    }
};
btnSubmit.add(new TinyMceAjaxSubmitModifier());

Have a look here for more info

Bophelo Mkhwanazi
  • 11
  • 1