使用 jQuery、hidden/not 隐藏元素等动态管理 TinyMCE 实例

Managing TinyMCE instances dynamically with jQuery, hidden/not hidden elements, etc

当我的网页加载时,我通过 class 将所有 TEXTAREA 元素分配给 TinyMCE,如下所示:

if ($('.assigntinymce').length){
    tinyMCE.init({
        plugins: 'lists,link,code',
        selector:'.assigntinymce',
        branding:false,
        menubar:false,
        statusbar:false,
        toolbar:'bold italic underline | fontsizeselect | forecolor | bullist numlist | alignleft aligncenter alignright | link | code | undo redo',
        content_css:'css/main.css'
    });
}

但是,由于用户交互,我可能想隐藏其中一些元素或显示隐藏的 TEXTAREA 元素。

如果我尝试隐藏已分配 TinyMCE 的 TEXTAREA 元素,TinyMCE 元素将保留。从该元素中完全删除 TinyMCE 的正确步骤是什么?我知道有一个 remove() 选项,但它似乎对我不起作用。我还必须删除 ID 或类似的东西吗?

相反,如果我有一个隐藏的 TEXTAREA 元素(未分配 TinyMCE),并且 运行 上面的代码,该元素不会转换为 TinyMCE。 TinyMCE 不会分配给隐藏的 TEXTAREA 是否正确?如果我然后不隐藏 TEXTAREA 元素,我应该能够 运行 相同的脚本并将 TinyMCE 分配给该元素然后?

在没有看到 运行 代码的情况下,很难确切地说出为什么会出现这些问题,但从根本上讲,使用 remove()init() 来删除和添加 TinyMCE <textarea> 是正确的 API 调用。

您选择显示和隐藏元素的方式将影响此问题。一些隐藏元素的方法只是通过 CSS 使其不可见,而其他方法则导致元素从 DOM 中删除。您执行此操作的方式会极大地影响事情。

如果您隐藏元素的方式导致它从 DOM 中 移除 (并在取消隐藏时重新添加),您需要在从 DOM 中删除之前,对该编辑器实例调用 remove()。当您取消隐藏元素时,您需要在元素重新添加到 DOM 后调用 init()

如果东西只是在视觉上隐藏(但仍然是 DOM 的一部分),则您不需要使用 remove(),因为该元素始终存在并且 TinyMCE 可以保持附加到该元素。

至于您对隐藏元素调用 init() 的评论...与上面一样,这取决于它是如何隐藏的。如果隐藏时它不是 DOM 的真正一部分,则不能对不在 DOM.

中的元素调用 init()

编辑:
根据您的评论,我假设您指的是 jQuery 函数?如果是这样,请快速查看 hide() 的 jQuery 文档,说明如下:

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" )

...我怀疑这意味着它确实从 DOM 中删除了。如果您不使用 jQuery 而只是使用 CSS 来设置可见性 = "hidden" 表单是否按预期运行?