Webix：文本编辑器与 tabview 的集成问题

Question

tabview 和文本编辑器集成似乎存在问题。只要用户不切换选项卡，编辑器就会显示并正常工作。当用户切换选项卡并返回到集成文本编辑器的选项卡时，编辑器的内容消失并变得无响应（无法在其中键入文本）。

我已经与以下编辑器进行了不同结果的测试：

ckeditor - 值已重置，组件变得无响应
tinymce - 值已重置，组件变得无响应
mercury - 值已重置但组件有效（您可以重新键入文本）。
nicedit - 有效！

这里是示例代码定义。

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'
        }]
    }]
});

有谁解决过这个问题，请指教。谢谢。左手

Answer 1

你知道Webix是如何处理标签页切换的吗？

我怀疑当切换选项卡时，它不小心破坏了 TinyMCE 底层 DOM 元素并在 return 时创建了一个新元素？

如果您要使用 TinyMCE 离开 "tab"，您可能需要 remove() TinyMCE，然后才能离开标签。当您 return 到选项卡时，您需要再次 init() 编辑器。这是 Web UI 的常见问题，在编辑器打开时 show/hide 或破坏 DOM 元素。

Answer 2

你可以 keepView 属性

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

它改变了多视图的逻辑，以保留基于 iframe 的视图（例如 ckeditor 等）

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

这是一个片段http://webix.com/snippet/8b9f24ea

Webix：文本编辑器与 tabview 的集成问题

Webix: Text editor integration issue with tabview

tinymce

text-editor

ckeditor

mercury-editor

webix