Search code examples
ckeditortinymcetext-editorwebixmercury-editor

Webix: Text editor integration issue with tabview


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


Solution

  • 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