我有一个表单,可以在其中静态创建一个工作正常的 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()被调用时,我不认为问题在这里。
最佳答案
您正在递增next_agpoitext
太快了。您应该在使用它构建 textAreaID
之后增加它。变量。
比方说next_agpoitext
值为 3
:
- 您正在创建
<textarea>
与id="agpoitexts-3-paragraph"
. - 您增加
next_agpoitext
。所以它现在的值为4
- 您使用递增的值来构建
textAreaID
变量,其值被赋予#agpoitexts-4-paragraph
- 您正在尝试调用
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.
结论:
- 增量
next_agpoitext
构建之后textAreaID
变量 - 删除
.ready()
调用包装tinyMCE.execCommand
关于javascript - 无法将动态添加的文本区域呈现为 TinyMCE 4.1.8,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31254884/