diff --git a/src/main/java/org/vaadin/tinymce/TinyMce.java b/src/main/java/org/vaadin/tinymce/TinyMce.java index 30ac1be..9ced4a5 100644 --- a/src/main/java/org/vaadin/tinymce/TinyMce.java +++ b/src/main/java/org/vaadin/tinymce/TinyMce.java @@ -86,8 +86,10 @@ public TinyMce() { public void setEditorContent(String html) { this.currentValue = html; if (initialContentSent) { - runBeforeClientResponse(ui -> getElement() - .callJsFunction("$connector.setEditorContent", html)); + runBeforeClientResponse(ui -> { + getElement().callJsFunction("$connector.setEditorContent", + html); + }); } else { ta.setProperty("innerHTML", html); } @@ -97,6 +99,11 @@ public void setEditorContent(String html) { protected void onAttach(AttachEvent attachEvent) { id = UUID.randomUUID().toString(); ta.setAttribute("id", id); + if (!attachEvent.isInitialAttach()) { + // Value after initial attach should be set via TinyMCE JavaScript + // API, otherwise value is not updated upon reattach + initialContentSent = true; + } ta.setProperty("innerHTML", currentValue); super.onAttach(attachEvent); initConnector(); @@ -117,6 +124,8 @@ private void initConnector() { ui.getPage().executeJs( "window.Vaadin.Flow.tinymceConnector.initLazy($0, $1, $2, $3)", rawConfig, getElement(), ta, config).then(res -> { + // Delay setting flag on first attach, otherwise setting + // initial value on attach does not work initialContentSent = true; }); }); diff --git a/src/main/resources/META-INF/resources/frontend/tinymceConnector.js b/src/main/resources/META-INF/resources/frontend/tinymceConnector.js index 025c807..c79b683 100644 --- a/src/main/resources/META-INF/resources/frontend/tinymceConnector.js +++ b/src/main/resources/META-INF/resources/frontend/tinymceConnector.js @@ -1,31 +1,38 @@ window.Vaadin.Flow.tinymceConnector = { initLazy: function (customConfig, c, ta, options) { - // Check whether the connector was already initialized for the datepicker + // Check whether the connector was already initialized for the editor + var currentValue = ta.innerHTML; + if (c.$connector) { - return; - } - - c.$connector = { + // If connector was already set, this is re-attach, remove editor + // and re-init + tinymce.remove(); + } else { + // Init connector at first visit + c.$connector = { - setEditorContent : function(html) { - this.editor.setContent(html); - }, + setEditorContent : function(html) { + // Delay setting the content, otherwise there is issue during reattach + setTimeout(() => { + currentValue = this.editor.setContent(html, {format : 'html'}); + }, 50); + }, - replaceSelectionContent : function(html) { - this.editor.selection.setContent(html); - }, + replaceSelectionContent : function(html) { + this.editor.selection.setContent(html); + }, - focus : function() { - this.editor.focus(); - }, + focus : function() { + this.editor.focus(); + }, - setEnabled : function(enabled) { - this.editor.mode.set(enabled ? "design" : "readonly"); - } + setEnabled : function(enabled) { + this.editor.mode.set(enabled ? "design" : "readonly"); + } - }; + }; - var currentValue = ""; + } const pushChanges = function() { c.$server.updateValue(currentValue) @@ -42,10 +49,10 @@ window.Vaadin.Flow.tinymceConnector = { baseconfig['setup'] = function(ed) { c.$connector.editor = ed; ed.on('setContent', function(e) { - currentValue = ed.getContent(); + currentValue = ed.getContent(); }); ed.on('change', function(e) { - currentValue = ed.getContent(); + currentValue = ed.getContent(); }); ed.on('blur', function(e) { currentValue = ed.getContent(); @@ -53,6 +60,7 @@ window.Vaadin.Flow.tinymceConnector = { }); }; + // Allways re-init editor tinymce.init(baseconfig); } } diff --git a/src/test/java/org/vaadin/tinymce/OnAttachTest.java b/src/test/java/org/vaadin/tinymce/OnAttachTest.java index 1878a82..6481e29 100644 --- a/src/test/java/org/vaadin/tinymce/OnAttachTest.java +++ b/src/test/java/org/vaadin/tinymce/OnAttachTest.java @@ -5,10 +5,13 @@ import java.util.Random; import com.vaadin.flow.component.AttachEvent; +import com.vaadin.flow.component.Composite; import com.vaadin.flow.component.DetachEvent; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.internal.ReflectTools; import com.vaadin.flow.router.PreserveOnRefresh; import com.vaadin.flow.router.Route; @@ -22,46 +25,53 @@ public OnAttachTest() { Button button = new Button("Switch"); List values = Arrays.asList("Value 1", "Value 2", "Value 3"); + Button button2 = new Button("Preset"); + EditorView editor = new EditorView(values.get(i)); + button2.addClickListener(e-> { + editor.setValue("

Blue

", true); + }); + button.addClickListener(e -> { this.removeAll(); i++; if (i > 2) i = 0; - editor.setValue(values.get(i)); - add(button, editor); + editor.setValue(values.get(i), false); + add(button, button2, editor); }); - add(button, editor); + add(button, button2, editor); } - public static class EditorView extends Div { + public static class EditorView extends Composite { private String value; private TinyMce tinyMce; public EditorView(String value) { this.value = value; + getContent().configurePlugin(true, Plugin.TABLE).configureToolbar(true, + Toolbar.TABLE); + getContent().addValueChangeListener(e -> { + this.value = e.getValue(); + }); } - public void setValue(String value) { + public void setValue(String value, boolean immediate) { + if (immediate) { + Notification.show(getContent().getValue()); + getContent().setValue(value); + } this.value = value; } @Override protected void onAttach(AttachEvent attachEvent) { super.onAttach(attachEvent); - tinyMce = new TinyMce(); - tinyMce.addValueChangeListener(e -> { - value = e.getValue(); - }); - tinyMce.configurePlugin(true, Plugin.TABLE).configureToolbar(true, - Toolbar.TABLE); - add(tinyMce); - tinyMce.setValue(value); + getContent().setValue(value); } @Override protected void onDetach(DetachEvent detachEvent) { - remove(tinyMce); } } }