Webix: Text editor integration issue with tabview

Question

There seams to be an issue with tabview and text editor integration. The editor displays and works fine as long as the user does not switch tabs. When the user switches tab and comes back to the tab where the text editor is integrated, the contents of the editor disappears and becomes irresponsive (can't type text in it).

I have tested this with the following editors with different results:

• ckeditor - value is reset, component becomes irresponsive
• tinymce - value is reset, component becomes irresponsive
• mercury - value is reset but component works (you can type text anew).
• nicedit - Works!

Here is sample code definition.

webix.ui({
    container: 'richtext-div',
    view: "tabview",
    cells:[{
        header: 'Tab 1',
        view: 'form',
        elements: [{
            view: 'ckeditor',
            width: 800,
            height: 500,
            value: 'This is a test value for the rich text component'
        }]
    },{
        header: 'Tab 2',
        rows: [{
            template: 'This is the second tab'
        }]
    }]
});

Anyone has resolved this issue before, please advise. Tnx. Lefteris

Answer 1

You can the keepView property

http://docs.webix.com/api__ui.multiview_keepviews_config.html

It changes the logic of multiview, to preserve iframe based views ( such as ckeditor and others )

view: "tabview",
multiview:{ keepViews:true },
cells:[{

Here is a spippet http://webix.com/snippet/8b9f24ea

Answer 2

Do you know how Webix handles the switching of tabs?

I suspect that when the tabs are switched that its accidentally destroying the TinyMCE underlying DOM element and making a new one when you return?

If you are leaving the "tab" with TinyMCE you likely need to remove() TinyMCE before leaving the tab. When you return to the tab you need to init() the editor again. This is a common problem with web UIs that show/hide or destroy DOM elements while the editor is open.