无法将动态添加的文本区域呈现为 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 编辑器。

我的代码中缺少什么？

我看到了这个，所以我尝试在我的 append() 调用之后添加 tinymce.init() 函数，但它没有改变任何东西，就像我原来的 tinymce.setup () 被调用，我认为问题不在这里。

Answer 1

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

假设 next_agpoitext 的值为 3:

您正在用 id="agpoitexts-3-paragraph" 创建一个 <textarea>。
你递增 next_agpoitext。所以它现在的值为 4
您使用增加的值构建 textAreaID 变量，该变量被赋值为 #agpoitexts-4-paragraph
您正在尝试在 DOM.

mceAddEditor

编辑： 此外，根据 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.

结论：

增加next_agpoitext 在构建textAreaID变量
删除包装 tinyMCE.execCommand

.ready()

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

Cannot render a dynamically added textarea as TinyMCE 4.1.8

html

javascript

jquery

tinymce-4