javascript - TinyMCE not fully loading on a LearnDashWordpress installation - Stack Overflow

admin管理员组

文章数量:1291425

I have a bug on a Wordpress installation with the plugin LearnDash : I use a feature called "Frontend course creator" but I can't create or save a course, because I have a JavaScript error directly linked to TinyMCE.

When the page is loaded, this error is logged in the console :

save.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setContent') at save.js:1:460896

This line is concerned :

tinymce.get("ir-course-material-editor").setContent(e.materials.rendered);

...and when I try to save a course :

save.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getContent') at save.js:1:539787

The code whis is concerned :

materials: tinymce.get("ir-course-material-editor").getContent(),

So I understand that TinyMCE is supposed to be loaded on the textarea with the ID "ir-course-material-editor".

The thing is, TinyMCE is loaded on another textarea of this page. So TinyMCE works on my website.

But the very weird thing is that the page publication works on an another environment : Ubuntu + Chrome.

I have tried other environments (MacOS with Firefox, Safari... Windows 11 + Chrome, even IpadOS + Chrome) and it doesn't work for me. I have also tried a fresh installation on a fresh website. It doesn't work.

I have contacted the Learndash support team, and they can't reproduce the error. They tell me it works for them on my website with MacOS + Chrome or Windows 11 + Chrome. They won't help me.

So I guess there is something, somewhere, on my environment, that cause this page not working.

In the inspector, I can see that TinyMCE is supposed to be loaded here :

a.useEffect)(( () => {
    wp.editor.initialize("ir-content-editor", {
        tinymce: {
            wpautop: !0,
            height: "300px",
            plugins: "charmap colorpicker compat3x directionality hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage link",
            toolbar1: "formatselect bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink |  media wp_add_media"
        },
        quicktags: !1,
        mediaButtons: !0
    }),
    wp.editor.initialize("ir-course-material-editor", {
        tinymce: {
            wpautop: !0,
            height: "300px",
            plugins: "charmap colorpicker compat3x directionality hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage link",
            toolbar1: "formatselect bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink |  media wp_add_media"
        },
        quicktags: !1,
        mediaButtons: !0
    }),

I guess it's React code but I'm not even sure of that. For "ir-content-editor" tinyMCE is loaded properly, but not for "ir-course-material-editor".

What can impeach the loading of TinyMCE on a navigator, on an environment ? I'm completely lost with this one.

本文标签： javascriptTinyMCE not fully loading on a LearnDashWordpress installationStack Overflow