javascript - 无法将动态添加的文本区域呈现为 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是正确的。但文本区域不会呈现为 TinyMCE 编辑器。

我的代码中缺少什么？

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

Answer 1

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

比方说next_agpoitext值为 3 :

1. 您正在创建 <textarea>与 id="agpoitexts-3-paragraph" .
2. 您增加 next_agpoitext 。所以它现在的值为 4
3. 您使用递增的值来构建 textAreaID变量，其值被赋予 #agpoitexts-4-paragraph
4. 您正在尝试调用 mceAddEditor TinyMCE 命令作用于 DOM 中实际不存在的文本区域。

编辑:另外，根据 jQuery 文档，您没有使用 .ready()适本地。 ready事件仅针对整个文档触发，您无法在常规 DOM 元素上为其添加监听器:

The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.

结论:

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