使用 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" 表单是否按预期运行?
当我的网页加载时,我通过 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" 表单是否按预期运行?