动态添加tinymce编辑器 [英] Add a tinymce editor dynamically

问题描述

当我显示它时，我有一个带有 2 个工作 tinymce 编辑器的页面.Textarea 是通过用户控件动态添加到页面中的(页面已经加载).以下 js/coffescript 旨在为新的 textarea 添加一个 tinymce 编辑器:

I have a page with 2 working tinymce editor when i display it. Textarea is dynamicaly added to the page with a user control (page already loaded). The following js/coffescript aim to add a tinymce editor to the new textarea:

$(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.我还可以看到，当显示alert时，页面上存在textarea，我猜这意味着脚本尝试添加tinymce时它存在.

If i do an alert event.field.find('textarea').attr("id"), it returns the correct ID of the textfield where the editor should be added. However, it does not add tinyMCE to the textarea. I can also see that when the alert is displayed, the textarea exist on the page, I guess it means it exist when the script try to add tinymce.

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

At the top of my body i have the following script :

<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 添加到新的文本区域?

What do I need to change to my script to succesfully add tinyMCE to the new textarea?

推荐答案

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

The control on which the tinymce editor will apply needed to render first. The point is it's require the element to be added in DOM and loaded first.

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

May be you can try to add some time delay to your script for adding/applying the editor.

试试这个(可能对你有帮助)

Try this (may this will help you)

创建一个函数

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

并在页面完全加载并且您的动态控件添加到 DOM 后调用 loadTinyMCEEditor().

and call loadTinyMCEEditor() after page fully loaded and your dynamic control added to DOM.

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