无法将动态添加的文本区域呈现为 TinyMCE 4.1.8

Question

我有一个表单，我可以在其中静态创建一个运行良好的 TinyMCE 编辑器。

现在，我想动态添加一个文本区域，我想将其渲染为 TinyMCE 编辑器。

根据我在网上找到的，我写了如下代码：

function add_new_agpoitext() {
    $("#agpoitextslist").append(
'<div class="row"> \
    <div class="col-md-8"> \
        <input type="hidden" name="agpoitexts[' + next_agpoitext + '][sequence]" value="' + next_agpoitext + '"/> \
        <div class="form-group textarea"> \
            <label class="control-label" for="agpoitexts-' + next_agpoitext + '-paragraph"><?=__("Paragraphe ");?>next_agpoitext + ":"</label> \
            <textarea name="agpoitexts[' + next_agpoitext + '][paragraph]" class="form-control" placeholder="Texte" rows="5" id="agpoitexts-' + next_agpoitext + '-paragraph"></textarea> \
        </div> \
    </div> \
</div>');

    next_agpoitext = next_agpoitext + 1;

    var textAreaID = "#agpoitexts-" + next_agpoitext + "-paragraph";

    $(textAreaID).ready(function(){
        tinyMCE.execCommand('mceAddEditor', true, textAreaID); 
    });

    return 1;
}

TinyMCe的初始化函数如下：

tinymce.init({
    selector: "textarea",
    ....
    setup : function(ed) {

        ...
    },
});

所以当我调用 add_new_agpoitext() 时，tinymce.init() 被调用，我可以看到 textarea id 是正确的。 但是 textarea 不会呈现为 TinyMCE 编辑器。

我的代码中缺少什么？

我看到了这个How to add tinymce 4.x dynamically to textarea?，所以我尝试在我的 append() 调用之后添加 tinymce.init() 函数，但它没有改变任何东西，因为我原来的 tinymce.setup() 被调用了，所以我没有不要认为问题出在这里。

Answer 1

你增加next_agpoitext 太快了。您应该在使用它来构建textAreaID 变量之后递增它。

假设next_agpoitext 的值为3：

1. 您正在使用id="agpoitexts-3-paragraph" 创建一个<textarea>。
2. 您增加next_agpoitext。所以它现在的值为4
3. 您使用增加的值来构建textAreaID 变量，该变量被分配了值#agpoitexts-4-paragraph
4. 您正试图在 DOM 中实际不存在的文本区域上调用 mceAddEditor TinyMCE 命令。

编辑：另外，根据 jQuery 文档，您没有正确使用 .ready()。 ready 事件仅针对整个文档触发，您不能在常规 DOM 元素上为其添加监听器：

.ready() 方法只能在匹配的 jQuery 对象上调用 当前文档，所以选择器可以省略。

总结：

1. 增加next_agpoitext在构建textAreaID变量后
2. 删除包装tinyMCE.execCommand 的.ready() 调用