当页面上已经有tinymce实例时，动态添加tinymce编辑器 [英] Add a tinymce editor dynamically when you already have tinymce instances on your page

问题描述

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

我有一个带有编辑器的页面（tinyMCE）。我动态添加textarea（添加条目按钮）。期望它能撤消我对其他TinyMCE所做的所有更改，效果很好。如果我加载一个带有tinyMCE的页面并显示 Something 40，然后键入 Something 40 and some something，然后单击添加一个条目，则会出现一个新的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 ：：底部， theme_advanced_buttons3_add： tablecontrols，全屏，工具栏： insertfile undo redo | styleselect |粗体斜体| alignleft aligncenter alignright alignjustify | Bullist numlist outdent缩进|链接图像，插件：粘贴， table，fullscreen，image，code，link， dialog_type： modal， content_css： / assets / application.css}）; 
 //]]> 
< / script> 
< script> 
函数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 |链接图像，插件：粘贴，表格，全屏，image，code，link， dialog_type： modal， content_css： / assets / application.css}）;; 
} 
< / script> 
  

两者都是添加一个很小的MCE的相同选项，第一个是我要显示的文本区域作为页面显示的编辑器，第二个是在我动态添加文本区域时要调用的函数。

这里是如何将tinyMCE添加到nex文本区域：

  $（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？

解决方案

您可以使用：

  tinymce.EditorManager.execCommand（'mceAddEditor'，true， here_place_editor_class或ID）; 
  

此外，如果您要使用ID且每个编辑器实例都需要使用ID，则需要动态生成此选择ID唯一。

This is a followup to this question i already asked : Add a tinymce editor dynamically

I have a page with editors in it (tinyMCE). I add textarea dynamically (an add entry button). It works fine expect that it undo all change i have done to other TinyMCE. If i loaded a page with a tinyMCE displaying "Something 40" and i typed "Something 40 and some stuff", and then i click to add an entry, a new tinymce appear but the first one now display "Something 40".

I use the following code :

<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>

Both are the same options to add a tiny MCE, the first is for the textarea i want to display as editor at page display, the second is in a function to be called when i add a textarea dynamically.

Here is how i add tinyMCE to 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")

How can i add a tinyMCE without erasing the changes of other TinyMCE fields?

解决方案

You can use :

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

Also you need to generate this selection ID dynamically if you want to use ID and each editor instance to be unique.

这篇关于当页面上已经有tinymce实例时，动态添加tinymce编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！