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 class

refreshNotes() 末尾的 tinymce.init 调用由于某种原因无效。

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

Answer 1

您的 JavaScript 很可能有时间问题。您有一个看起来是异步的 $.get() 调用，然后您立即尝试初始化 TinyMCE。直到异步调用 returns 之后，您才创建 DOM 节点，但是您在开始调用以从服务器获取数据后立即初始化 TinyMCE。当您尝试从控制台调用时，$.get() 可能已经完成，并且一切如您所愿。

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

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

tinymce wont init in function, works in browser console

javascript

html

tinymce

jinja2