当您的页面上已经存在tinymce实例时,动态添加一个tinymce编辑器

Question

这是我已经问过的这个问题的后续内容:动态添加一个tinymce编辑器

我有一个包含编辑器的页面(tinyMCE).我动态添加textarea(添加条目按钮).它工作正常,期望它撤消我对其他TinyMCE所做的所有改变.如果我加载了一个显示"Something 40"的tinyMCE的页面,我输入了"Something 40 and some stuff",然后我点击添加一个条目,出现一个新的tinymce,但第一个现在显示"Something 40".

我使用以下代码:

<script type="text/javascript">
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"bottom","theme_advanced_buttons3_add":"tablecontrols,fullscreen","toolbar":"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image","plugins":"paste,table,fullscreen,image,code,link","dialog_type":"modal","content_css":"/assets/application.css"});
//]]>
</script>
<script>
function loadTinyMCEEditor() {
tinyMCE.init({"selector":"textarea.tinymce","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"bottom","theme_advanced_buttons3_add":"tablecontrols,fullscreen","toolbar":"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image","plugins":"paste,table,fullscreen,image,code,link","dialog_type":"modal","content_css":"/assets/application.css"});
}
</script>

两者都是添加一个小MCE的相同选项,第一个是我希望在页面显示时显示为编辑器的textarea,第二个是在我动态添加textarea时调用的函数.

这是我如何将tinyMCE添加到nex textarea:

$(document).on 'nested:fieldAdded', (event) ->
  loadTinyMCEEditor()
  #alert "azeaze"+event.field.attr("id")
  #alert "totoooot "+event.field.find('textarea').attr("id")
  tinyMCE.execCommand "mceAddControl", true, event.field.find('textarea').attr("id")

如何在不删除其他TinyMCE字段的变化的情况下添加tinyMCE？

Answer 1

您可以使用 :

tinymce.EditorManager.execCommand('mceAddEditor', true, "here_place_editor_class or ID");

如果要使用ID并且每个编辑器实例都是唯一的,则还需要动态生成此选择ID.