tinymce不会在函数中初始化，在浏览器控制台中工作

Question

我有一个函数，它将HTML附加到div，然后尝试在<textarea>字段上初始化tinyMCE:

function refreshNotes() {
{#console.log("fetching notes")#}
$.get({
url: "/notes/{{ record_id }}",
dataType: "json"
}, (response) => {
$("#noteCollapseNotes").empty()
const notes = Object.entries(response["data"])
{#console.log(notes)#}

for (const [key, note] of notes) {
{#console.log(key, note)#}
$("#noteCollapseNotes").append(getNoteHTML(key, note))

})
tinymce.init({
selector: ".readonly",
readonly: true,
menubar: false,
toolbar: false,
height: 100
});
}

每当用户对笔记执行CRUD操作时，就调用refreshNotes。getNoteHTML()生成<div>,<textarea>内部包含.readonly类

由于某种原因，refreshNotes()后面的tinymce.init调用不起作用。

但是，如果我进入控制台并粘贴相同的调用，编辑器初始化成功。这里的问题是什么?

Answer 1

很可能你的JavaScript有时间问题。您有一个$.get()调用，看起来是异步的，然后立即尝试初始化TinyMCE。直到异步调用返回之后才制作DOM节点，但是在开始调用以从服务器获取数据之后，您正在初始化TinyMCE。当您尝试从控制台调用东西时，$.get()很可能已经完成，并且事情按照您希望的方式工作。

我会将tinymce.init({})调用移动到您的成功函数中，在for完成后创建新的DOM节点。