且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

导航选项卡时tinymce编辑器的问题

更新时间:2023-12-06 14:17:46

如果你正在做任何动态的事情(比如通过javascript切换标签)和TinyMCE你必须手动添加和删除编辑器,否则会得到奇怪的结果。我在博客文章(我假设你在评论之前没有真正阅读并要求我帮助你)但其中的要点是:

If you're doing anything dynamic (like switching between "tabs" via javascript) with TinyMCE you have to add and remove the editors manually or you will get strange results. I cover this in more detail in my blog post (which I'm assuming you didn't actually read before commenting on it and asking for me to help you with this) but the gist of it is this:


  1. 使用模式none,以便TinyMCE不会自动初始化并接管文本区域。使用textareas模式会导致任何隐藏文本区域出现问题,因为它们无法正确初始化。 (例如,选项卡2上的那个最初是隐藏的。)

  1. Use mode "none" so that TinyMCE doesn't automatically init and take over text areas. Using mode "textareas" will cause issues for any hidden text areas since they won't be properly initialized. (For example, the one on tab 2 is initially hidden.)

任何时候显示一个标签(例如在页面加载或切换标签时),手动在文本区域初始化TinyMCE编辑器,如下所示:

Anytime a tab is shown (like say at page load or when switching tabs), manually initialize the TinyMCE editor on the text area like so:

tinyMCE.execCommand('mceAddControl',false,'the_textareas_id_here');

tinyMCE.execCommand('mceAddControl', false, 'the_textareas_id_here');

在切换到新选项卡之前,触发当前文本区域的保存(这会将TinyMCE编辑器的内容放回实际表单的文本区域。

Before switching to a new tab, trigger a save on the current text area (this will put the contents of the TinyMCE editor back into the actual form's text area.

tinyMCE.triggerSave();

tinyMCE.triggerSave();

删除当前的TinyMCE实例:

Remove the current TinyMCE instance:

tinyMCE.execCommand('mceFocus',false,'the_textareas_id_here');

tinyMCE.execCommand('mceRemoveControl',false,'the_textareas_id_here');

tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');
tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');

切换到新标签页并从步骤1开始重复。

Switch to the new tab and repeat from step 1.