背景
tinyMCE 是一款流行的富文本编辑器，广泛应用于 Web 前端开发中。有时候我们需要在页面中动态地添加或移除编辑器实例，但是直接调用 tinymce.remove() 和 tinymce.init() 方法可能会出现一些问题。本文将介绍如何正确地移除并重新添加 tinyMCE 编辑器。
移除 tinyMCE 编辑器
首先，我们需要明确调用 tinymce.remove() 只能销毁已经初始化的编辑器实例。如果我们想要动态地移除编辑器，需要保留编辑器的初始化配置和内容，并且在重新添加时不会出现任何问题。
步骤
以下是移除 tinyMCE 编辑器的具体步骤：
获取当前编辑器的内容和配置信息
--- ------ - ------------------------- --- ------- - -------------------- --- -------- - ----------------
销毁编辑器实例
----------------
将编辑器容器元素清空
----------------------------------------------------- - ---
还原原始的内容和配置信息
--- --------- - ----------------------- ------------------------------
这样，我们就成功地移除了编辑器实例，并保留了原始的内容和配置信息。
重新添加 tinyMCE 编辑器
在上一步中，我们已经将编辑器实例成功地移除了。现在我们需要重新添加一个新的编辑器实例，并保证它可以正常工作。
步骤
以下是重新添加 tinyMCE 编辑器的具体步骤：
将编辑器容器元素恢复到初始状态
----------------------------------------------------- - ------------------------
初始化编辑器实例
-------------- --------- ----------- -- -------- ---
这样，我们就成功地重新添加了一个新的编辑器实例。
示例代码
以下是完整的示例代码，可以直接运行并查看效果：
--------- -----
------
------
------- ------------------------------------------------------------------ ---------------------------------
-------
------
---- ----------------------
----------------------------
------
------- ----------------------------------------------------
--------
-------- ---------------------- -
--- ------ - --------------------------------
--- ------- - --------------------
--- -------- - ----------------
----------------
----------------------------------------------------- - ---
--- --------- - -----------------------
------------------------------
-
--------------
--------- -----------
------- ----
-------- -------- -------- ----- ---- ----- ------- ----- ------- ------ ------------- ------------ ---- ---------- -------------- ----- ----- ----- ---- ---- -----------
-------- ----- ---- - ------------ - ---- ------ - --------- ----------- ---------- ------------ - ------- ------- ------- ------ - ------------ - -----
---
---------
-------
-------总结
本文介绍了如何移除并重新添加 tinyMCE 编辑器，并提供了详细的示例代码。通过掌握这些技巧，我们可以在前端开发中更加方便地动态地管理编辑器实例。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28338