动态添加 tinymce 编辑器

Add a tinymce editor dynamically

本文关键字：编辑器 tinymce 添加 动态      更新时间：2023-09-26

当我显示它时，我有一个带有 2 个工作 tinymce 编辑器的页面。文本区域使用用户控件（页面已加载）动态添加到页面。以下 js/coffescript 旨在为新的文本区域添加一个 tinymce 编辑器：

$(document).on 'nested:fieldAdded', (event) ->
  tinyMCE.execCommand("mceAddControl", false, event.field.find('textarea').attr("id"))

如果我做一个alert event.field.find('textarea').attr("id")，它会返回应该添加编辑器的文本字段的正确 ID。但是，它不会向文本区域添加 tinyMCE。我还可以看到，当显示警报时，页面上存在文本区域，我想这意味着当脚本尝试添加 tinymce 时它存在。

在我的身体顶部，我有以下脚本：

<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","plugins":"paste,table,fullscreen","dialog_type":"modal","content_css":"/assets/application.css"});
//]]>
</script>

我需要对脚本进行哪些更改才能成功地将 tinyMCE 添加到新的文本区域？

首先

需要呈现tinymce编辑器的控件。关键是它需要将元素添加到 DOM 中并首先加载。

也许您可以尝试在脚本中添加一些时间延迟以添加/应用编辑器。

试试这个（愿这会帮助你）

创建函数 

function loadTinyMCEEditor() {
  tinyMCE.init({
  });
}

并在页面完全加载并将动态控件添加到 DOM 后调用loadTinyMCEEditor()。

相关文章：