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
            });
        }

refreshNotes 在用户对笔记执行 CRUD 操作时被调用。 getNoteHTML() 产生一个 <div> 内部有一个 <textarea> 包含 .readonly 类

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

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

Answer 1

您的 JavaScript 很可能存在时间问题。您有一个看起来是异步的$.get() 调用，然后您立即尝试初始化 TinyMCE。在异步调用返回之前，您不会创建 DOM 节点，但是在您开始调用以从服务器获取数据后立即初始化 TinyMCE。当您尝试从控制台调用事物时，$.get() 可能已完成，并且事情会按照您的意愿运行。

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