動態添加tinymce編輯器

Question

當我顯示它時，我的頁面上有2個可用的tinymce編輯器。 Textarea通過用戶控件（頁面已加載）動態添加到頁面中。 以下js / coffescript旨在向新的textarea添加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添加到文本區域。 我還可以看到，當顯示警報時，頁面上存在textarea，我猜這意味着當腳本嘗試添加tinymce時，textarea存在。

在我的身體頂部，我有以下腳本：

<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添加到新的文本區域嗎？

Answer 1

首先需要對tinymce編輯器應用的控件。 關鍵是它要求將元素添加到DOM中並首先加載。

可能是您可以嘗試為添加/應用編輯器的腳本添加一些時間延遲。

試試這個（可能對您有幫助）

發揮作用

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

並在頁面完全加載並將動態控件添加到DOM后調用loadTinyMCEEditor() 。