Question

我有一个表单，我静态创建一个TinyMCE编辑器，工作正常。

现在，我想动态添加一个我想要呈现为TinyMCE编辑器的textarea。

根据我在网上发现的内容，我写了以下代码：

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 init函数如下：

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：

您正在使用<textarea>创建id="agpoitexts-3-paragraph"。

您递增next_agpoitext。所以现在它的值为4

使用递增的值构建textAreaID变量，该变量的值为#agpoitexts-4-paragraph

您正尝试在DOM中实际存在的textarea上调用mceAddEditor TinyMCE命令。

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

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

总结：

在构建next_agpoitext变量之后增加textAreaID

移除包裹.ready()
的tinyMCE.execCommand来电

无法将动态添加的textarea呈现为TinyMCE 4.1.8

1 个答案: