Problem with TinyMCE on Wicket when using addOrReplace

31 Views Asked by At

I have a class, let's say MyRichTextEditor that becomes enriched via TinyMCESettings.

Iside a form, there are 2 fields that use MyRichEditor components. When submitting the form, I want to repaint these components using the addOrReplace() method. However, after the ajax request, no rich text is on the page. Instead, the initial textArea fields are shown.

MyRichEditorClass.java

public class MyRichTextEditor extends TextArea<String> {

    protected TinyMCESettings settings;
    private boolean showToolbar;
    private boolean readOnly;

    public MyRichTextEditor(String id, boolean showToolbar, boolean readOnly) {

        super(id);
        this.showToolbar = showToolbar;
        this.readOnly = readOnly;
        settings = new TinyMCESettings(TinyMCESettings.Theme.modern);
        settings.addCustomSetting("content_style: \"body { font-family: Verdana,sans-serif; font-size: 15px; }\"");
        addSettings();
        add(new TinyMceBehavior(settings));

    }

    public MyRichTextEditor(String id) {

        this(id, true, false);

    }

    @Override
    protected void onInitialize() {

        super.onInitialize();
        add(AttributeAppender.append("class", "my-rich-text-editor"));
        if (getModelObject() == null) {
            setModelObject("Insert your text here");
        }

    }

    protected void addSettings() {

        settings.setMenuBar(false);
        settings.addCustomSetting("force_p_newlines : true");
        settings.addCustomSetting("force_br_newlines : true");
        settings.addCustomSetting("convert_newlines_to_brs : false");
        settings.addCustomSetting("remove_linebreaks : true");

        if (showToolbar) {
            //@formatter:off
                String plugins = "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak "
                        + "searchreplace  visualblocks visualchars code fullscreen insertdatetime "
                        + "table contextmenu directionality emoticons template textcolor paste fullpage colorpicker";

                // @formatter:on  
            String[] pluginNames = plugins.split(" ");

            for (String name : pluginNames) {
                settings.addPlugins(name);
            }

            settings.addToolbar(
                new Toolbar(
                    "toolbar1",
                    "newdocument | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect"));
            settings.addToolbar(
                new Toolbar(
                    "toolbar2",
                    "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | inserttime preview | forecolor backcolor"));
            settings.addToolbar(
                new Toolbar(
                    "toolbar3",
                    "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | nonbreaking  restoredraft"));

            settings.addCustomSetting("readonly : " + (readOnly ? "1" : "0"));

        } else {
            settings.addCustomSetting("readonly:1");
            settings.addCustomSetting("toolbar:false");

        }

    }

}

MyPanel.html

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<body>
<wicket:panel>
    <wicket:extend>
        <form wicket:id="form">

            .
            .
            .

            
            <wicket:label for="description">Request Description</wicket:label>
            <textarea wicket:id="description"></textarea>
           

                
            <wicket:label for="response">Response</wicket:label>
            <textarea wicket:id="response"></textarea>
                


            .
            .
            .

        </form>


    </wicket:extend>
</wicket:panel>

</body>
</html>

MyPanel.java

class EpikAitimaKentrikisDiacheirisisPanel extends ...{

    ...

    TextArea<String> description, response;


    AjaxSubmitLink btnSave;

    
    @Override
    protected void onInitialize() {

        super.onInitialize();

        form = new CompoundPropertyModelForm<>("form", modelObject);
        add(form);

                ...

        paintDescriptionAndResponseComponents();

        

        btnSave = new AjaxSubmitLink("btnSave"){

            @Override
            protected void οnSubmit(AjaxRequestTarget target) {

                btnSaveOnSubmit(target);

            }

        };
        btnSave.add(new TinyMceAjaxSubmitModifier());
        form.add(btnSave);

    }

    private void btnSaveOnSubmit(AjaxRequestTarget target) {

        form.getModelObject().setDescription(org.springframework.web.util.HtmlUtils.htmlUnescape(description.getModelObject()));

        //save form.getModelObject
                //reload saved object

        paintDescriptionAndResponseComponents();

        target.add(form);

    }

    

    private void paintDescriptionAndResponseComponents() {

        description= new MyRichTextEditor("description", showDescriptionToolbar(), descriptionReadOnly());
        description.add(Validators.required());
        description.setOutputMarkupPlaceholderTag(true);
        form.addOrReplace(description);

        response= new MyRichTextEditor("response", showResponseToolbar(), responseReadOnly());
        response.setOutputMarkupPlaceholderTag(true);
        response.add(Validators.required());
        form.addOrReplace(response);

    }

    private boolean reponseReadOnly() {

        ...
    }

    private boolean showResponseToolbar() {

        ...
    }

    private boolean descriptionReadOnly() {

        ...

    }

    private boolean showDescriptionToolbar() {

        ...

    }

}
0

There are 0 best solutions below