tinyMCE in a tabsheet

Hi,
I wonder if anyone can help. We are using vaadin 7.4.2 with the addon vaadin-wrapper-for-tinymce 3.0

I am building a layout (extending VerticalLayout) that contains a single tabsheet. Within the tabsheet:

  1. the first tab is a VerticalLayout which in turn has a single component being an instance of TinyMCETextField
  2. the 2nd tab is an empty VertcialLayout
  3. the 3rd tab is an empty VeritcalLayout

When the browser renders the page, the first tab is display and the TinyMCE editor is correctly rendered.
When I change tab the correct tab is shown (albeit empty for now)

When I change back to the first tab (the one with the TinyMCE editor), the content of the editor is displayed within a div, but the TinyMCE editor is not displayed. Using chrome dev tools to inspect the dom, it looks like the div with the content is showing because the TinyMCE javascript has not been executed (or more accurately, re-executed ?)

Does anyone know how I can get the TinyMCE editor to re-render correctly when I switch tabs?

Thanks

Nathan

Hi
I’m having the same problem, however a completely different scenario, I’m using it in cuba framework. The screens are organized as tabsheet. When I open a screen where there are TinyMCE boxes, everything looks fine, however if I change to a different tab, and then come back, all the tinyMCE boxes disappear, in place of each there will be a disabled textbox…
the error message in the console is

Uncaught TypeError: Cannot read property 'fire' of undefined at Array.<anonymous> (cdn.tinymce.com/4/tinymce.min.js?v=2017_02_07_16_37:12) at n (cdn.tinymce.com/4/tinymce.min.js?v=2017_02_07_16_37:3) at d (cdn.tinymce.com/4/tinymce.min.js?v=2017_02_07_16_37:12) at e (cdn.tinymce.com/4/tinymce.min.js?v=2017_02_07_16_37:2) at m (cdn.tinymce.com/4/tinymce.min.js?v=2017_02_07_16_37:2) It might relate to
this
error, but I don’t really understand which id are they talking about. As I see the generated component has an alphanumerical id:

<div id="mceu_17" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application"
     style="visibility: hidden; border-width: 1px;">
    <div id="mceu_17-body" class="mce-container-body mce-stack-layout">
        <div id="mceu_18" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" hidefocus="1"
             tabindex="-1" role="group">
            <div id="mceu_18-body" class="mce-container-body mce-stack-layout">
                <div id="mceu_19" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last"
                     role="toolbar">
                    <div id="mceu_19-body" class="mce-container-body mce-flow-layout">
                        <div id="mceu_20" class="mce-container mce-flow-layout-item mce-first mce-btn-group"
                             role="group">
                            <div id="mceu_20-body">
                                <div id="mceu_0" class="mce-widget mce-btn mce-first mce-disabled" tabindex="-1"
                                     aria-labelledby="mceu_0" role="button" aria-label="Undo" aria-disabled="true">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-undo"></i></button>
                                </div>
                                <div id="mceu_1" class="mce-widget mce-btn mce-last mce-disabled" tabindex="-1"
                                     aria-labelledby="mceu_1" role="button" aria-label="Redo" aria-disabled="true">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-redo"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_21" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
                            <div id="mceu_21-body">
                                <div id="mceu_2" class="mce-widget mce-btn mce-menubtn mce-first mce-last" tabindex="-1"
                                     aria-labelledby="mceu_2" role="button" aria-label="Table" aria-haspopup="true">
                                    <button id="mceu_2-open" role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-table"></i> <i class="mce-caret"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_22" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
                            <div id="mceu_22-body">
                                <div id="mceu_3" class="mce-widget mce-btn mce-first" tabindex="-1"
                                     aria-labelledby="mceu_3" role="button" aria-label="Bold">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-bold"></i></button>
                                </div>
                                <div id="mceu_4" class="mce-widget mce-btn mce-last" tabindex="-1"
                                     aria-labelledby="mceu_4" role="button" aria-label="Italic">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-italic"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_23" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
                            <div id="mceu_23-body">
                                <div id="mceu_5" class="mce-widget mce-btn mce-first" tabindex="-1"
                                     aria-labelledby="mceu_5" role="button" aria-label="Align left">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-alignleft"></i></button>
                                </div>
                                <div id="mceu_6" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_6"
                                     role="button" aria-label="Align center">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-aligncenter"></i></button>
                                </div>
                                <div id="mceu_7" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_7"
                                     role="button" aria-label="Align right">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-alignright"></i></button>
                                </div>
                                <div id="mceu_8" class="mce-widget mce-btn mce-last" tabindex="-1"
                                     aria-labelledby="mceu_8" role="button" aria-label="Justify">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-alignjustify"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_24" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
                            <div id="mceu_24-body">
                                <div id="mceu_9" class="mce-widget mce-btn mce-splitbtn mce-menubtn mce-first"
                                     role="button" tabindex="-1" aria-label="Bullet list" aria-haspopup="true">
                                    <button type="button" hidefocus="1" tabindex="-1"><i
                                            class="mce-ico mce-i-bullist"></i></button>
                                    <button type="button" class="mce-open" hidefocus="1" tabindex="-1"><i
                                            class="mce-caret"></i></button>
                                </div>
                                <div id="mceu_10" class="mce-widget mce-btn mce-splitbtn mce-menubtn" role="button"
                                     tabindex="-1" aria-label="Numbered list" aria-haspopup="true">
                                    <button type="button" hidefocus="1" tabindex="-1"><i
                                            class="mce-ico mce-i-numlist"></i></button>
                                    <button type="button" class="mce-open" hidefocus="1" tabindex="-1"><i
                                            class="mce-caret"></i></button>
                                </div>
                                <div id="mceu_11" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_11"
                                     role="button" aria-label="Decrease indent">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-outdent"></i></button>
                                </div>
                                <div id="mceu_12" class="mce-widget mce-btn mce-last" tabindex="-1"
                                     aria-labelledby="mceu_12" role="button" aria-label="Increase indent">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-indent"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_25" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
                            <div id="mceu_25-body">
                                <div id="mceu_13" class="mce-widget mce-btn mce-first" tabindex="-1"
                                     aria-labelledby="mceu_13" role="button" aria-label="Insert/edit link">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-link"></i></button>
                                </div>
                                <div id="mceu_14" class="mce-widget mce-btn mce-last" tabindex="-1"
                                     aria-labelledby="mceu_14" role="button" aria-label="Insert/edit image">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-image"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="mceu_26" class="mce-container mce-flow-layout-item mce-last mce-btn-group"
                             role="group">
                            <div id="mceu_26-body">
                                <div id="mceu_15" class="mce-widget mce-btn mce-first" tabindex="-1"
                                     aria-labelledby="mceu_15" role="button" aria-label="Source code">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-code"></i></button>
                                </div>
                                <div id="mceu_16" class="mce-widget mce-btn mce-last" tabindex="-1"
                                     aria-labelledby="mceu_16" role="button" aria-label="Fullscreen"
                                     aria-pressed="false">
                                    <button role="presentation" type="button" tabindex="-1"><i
                                            class="mce-ico mce-i-fullscreen"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="mceu_27" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1"
             tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
            <iframe id="280_ifr" frameborder="0" allowtransparency="true"
                    title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help"
                    src='javascript:""' style="width: 100%; height: 100px; display: block;"></iframe>
        </div>
        <div id="mceu_28" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1"
             tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
            <div id="mceu_28-body" class="mce-container-body mce-flow-layout">
                <div id="mceu_29" class="mce-path mce-flow-layout-item mce-first">
                    <div class="mce-path-item">&nbsp;</div>
                </div>
                <div id="mceu_30" class="mce-flow-layout-item mce-last mce-resizehandle"><i
                        class="mce-ico mce-i-resize"></i></div>
            </div>
        </div>
    </div>
</div>

Could you please help us, how could we track down this issue?

If you are not tied to TinyMce for some other reason, we found the CkEditor wrapper to be much better in that it handles tab switching correctly.

I still have another unanswered post regarding configuring other aspects of the TinyMce wrapper (https://vaadin.com/forum#!/thread/15026385).

Because of not being able to tab switch, not being able to configure key editor features (ie. any use of the setup hook), and not getting any suggestions from Vaadin, the community, or the add-on author (who works for Vaadin); we have concluded that this add-on doesnt work very well, has not been properly tested with real world scenarios, and is certainly not production ready.

My advise would be to look at CkEditor

Thanks Nathan,

No, I’m not tied to it, and it seems to be a great sugestion, thank you! If it works as you say, I will replace it efinitely.
However today I’ve made a workaround, which was basically detecting the tabchange, and then throw away and reinit the tinyMCE components.

Thank you for your suggestion, I will look into it soon!

Gabor