Hey Guys,
I have a pretty complex edit form (lots of sections and field) - and I have the binder set correctly for the TinyMCE editor - but the data isn't populated the first time the form is shown. Each subsequent time the "edit" button from the grid is clicked - the TinyMCE editor is populated correctly (and saves correctly).
Is there a way to tell if it's instantiated before the form shows?
Thanks for such a great extension!
Bob Cusick
Could you provide an example how to reproduce this? And let me know which version you are using. Binder is essentially using setValue and then listening to value changes. I couldn't reproduce with the latest version at least.
Hi Matti,
Thank you for the quick response! I'm using Vaadin 24.1.3, and 4.0.2 of the editor. When I create a simple solution (grid and edit button) - it works fine. When I have a complex form it doesn't populate only the first time it's shown. Not sure how to give you an example... is there something I can "try"?
Don't know if it will help - but I've attached the browser console log with the first time the "Edit" button is clicked (from the grid) and the second time it's clicked (from the grid).
Thanks again for any guidance!
Bob
[19008742.txt|attachment](upload://urdq1reuV40brJK65P8o1miZ7zX.txt) (24.4 KB) [19008745.txt|attachment](upload://36n0OEvqc1CuP6xxPZFPfgfaaPE.txt) (3 KB)Hey Matti!
SO, I've been trying everything I can think of - and I've narrowed it down to one thing: if the editor is part of a form that is hidden, and you show the form - the editor does not render - even though the BINDING is giving the right data.
If you SHOW the editor and edit a row - it renders immediately.
The non-render only happens the FIRST TIME the editor is shown. If you edit subsequent rows, it renders correctly. However, if you navigate away from the master form (that contains the editor) and you return - the same behavior happens - it shows, but the editor doesn't render.
I tried to see if there was an init() or forceInit() or some way to ensure the editor was initialized before it was shown... I even tried to manually set the contents when the binder.setBean(myClass) was called - all to no avail. The contents of the text area is:
<iframe id="b9410bbd-f294-4df3-9039-950b67339675_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area" class="tox-edit-area__iframe" srcdoc="<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body id="tinymce" class="mce-content-body " data-id="b9410bbd-f294-4df3-9039-950b67339675" aria-label="Rich Text Area. Press ALT-0 for help."><br></body></html>"></iframe>
Is there a way to "force" the component to initialize?
Thanks again for creating such a useful tool!
BTW: This is with version 4.0.5 and Vaadin Flow 24.3.1
Bob
Matti - I'm a colleague of Bob's and we've narrowed down the issue to this - the editor is in a edit Form on a page with a grid. The edit form is hidden (setvisible(false)) upon page instantiation. When the user clicks Edit, the edit form is set to visible. The first time the user does this, the tinymce object is blank and the pane (using Inspect) only contains "<br data-mce-bogus="1">". Once the user closes the editor and then reopens it, everything works fine. I think it's related to this issue in Vaadin:
https://vaadin.com/docs/v14/flow/components/tutorial-component-basic-features#client-side-consequences-of-the-invisible-setting
"If a component is set as invisible before it is rendered for the first time, the corresponding element in the DOM is not created, but the server-side structure is maintained. When the component is set as visible, the DOM is properly updated."
I'm pretty sure it's this because if we load the page and set the edit form to visible, everything works fine from there out - even if we hide/unhide it when the user clicks edit thereafter. It only breaks when the edit form containing the tinymce object is hidden upon initial load.
Can you think of any workaround?