How to embed editor.md on a Moodle site?

[taowang1993]

I am trying to embed editor.md on moodle, but it keeps loading.

You can go the the Moodle demo site, sign in as admin, open a course, add a page.

https://sandbox.moodledemo.net/

Then, copy and paste the following code into the page.

<link href="https://cdn.jsdelivr.net/npm/editor.md/css/editormd.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/editor.md/editormd.min.js"></script>
<div id="editor">
    <textarea style="display:none;"></textarea>
</div>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            width: "100%",
            height: 640,
            path: "https://cdn.jsdelivr.net/npm/editor.md/lib/",
            pluginPath: "https://cdn.jsdelivr.net/npm/editor.md/plugins/",
            watch: false,
            saveHTMLToTextarea: true,
            mode: "markdown",
            theme: "default",
            editorTheme: "default",
            previewTheme: "default",
            toolbarIcons: "full",
            toolbarCustomIcons: {},
            delay: 300,
            autoLoadModules: true,
            autoCloseTags: true,
            placeholder: "",
            value: "",
            markdown: "",
            appendMarkdown: "",
            gotoLine: true,
            codeFold: true,
            autoHeight: false,
            autoFocus: true,
            autoTypographer: false,
            minHeight: "150px",
            maxHeight: "none",
            syncScrolling: "single",
            readOnly: false,
            tabSize: 4,
            indentUnit: 4,
            lineNumbers: true,
            lineWrapping: true,
            matchBrackets: true,
            indentWithTabs: true,
            styleSelectedText: true,
            matchWordHighlight: true,
            styleActiveLine: true,
            dialogLockScreen: true,
            dialogShowMask: true,
            dialogDraggable: true,
            dialogMaskBgColor: "#fff",
            dialogMaskOpacity: 0.1,
            tex: true,
            atLink: true,
            emailLink: true,
            taskList: true,
            emoji: true,
            tocm: true,
            tocContainer: "",
            tocDropdown: false,
            tocTitle: "",
            toolbarTips: true,
            searchReplace: true,
            flowChart: true,
            sequenceDiagram: true,
            imageUpload: false,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "",
            crossDomainUpload: false,
            uploadCallbackURL: "",
            logoHTML: "",
            toolbar: true,
            toolbarAutoFixed: true,
            lang: {
                name: "en",
                description: "Open source online Markdown editor.",
                tocTitle: "Table of Contents",
                toolbar: {
                    undo: "Undo (Ctrl+Z)",
                    redo: "Redo (Ctrl+Y)",
                    bold: "Bold",
                    del: "Strikethrough",
                    italic: "Italic",
                    quote: "Block quote",
                    ucwords: "Words first letter convert to uppercase",
                    uppercase: "Selection text convert to uppercase",
                    lowercase: "Selection text convert to lowercase",
                    h1: "Heading 1",
                    h2: "Heading 2",
                    h3: "Heading 3",
                    h4: "Heading 4",
                    h5: "Heading 5",
                    h6: "Heading 6",
                    "list-ul": "Unordered list",
                    "list-ol": "Ordered list",
                    hr: "Horizontal rule",
                    link: "Link",
                    "reference-link": "Reference link",
                    image: "Image",
                    code: "Code inline",
                    "preformatted-text": "Preformatted text / Code block (Tab indent)",
                    "code-block": "Code block (Multi-languages)",
                    table: "Tables",
                    datetime: "Datetime",
                    emoji: "Emoji",
                    "html-entities": "HTML Entities",
                    pagebreak: "Page break",
                    watch: "Unwatch",
                    unwatch: "Watch",
                    preview: "HTML Preview (Press Shift + ESC exit)",
                    fullscreen: "Fullscreen (Press ESC exit)",
                    clear: "Clear",
                    search: "Search",
                    help: "Help",
                    info: "About"
                },
                buttons: {
                    enter: "Enter",
                    cancel: "Cancel",
                    close: "Close"
                },
                dialog: {
                    link: {
                        title: "Link",
                        url: "Address",
                        urlTitle: "Title",
                        urlEmpty: "Error: Please fill in the link address."
                    },
                    referenceLink: {
                        title: "Reference link",
                        name: "Name",
                        url: "Address",
                        urlId: "ID",
                        urlTitle: "Title",
                        nameEmpty: "Error: Reference name can't be empty.",
                        idEmpty: "Error: Please fill in reference link id.",
                        urlEmpty: "Error: Please fill in reference link url address."
                    },
                    image: {
                        title: "Image",
                        url: "Address",
                        link: "Link",
                        alt: "Title",
                        uploadButton: "Upload",
                        imageURLEmpty: "Error: picture url address can't be empty.",
                        uploadFileEmpty: "Error: upload pictures cannot be empty!",
                        formatNotAllowed: "Error: only allows to upload pictures file, upload allowed image file format:"
                    },
                    preformattedText: {
                        title: "Preformatted text / Codes",
                        emptyAlert: "Error: Please fill in the Preformatted text or content of the codes.",
                        placeholder: "coding now...."
                    },
                    codeBlock: {
                        title: "Code block",
                        selectLabel: "Languages: ",
                        selectDefaultText: "select a code language...",
                        otherLanguage: "Other languages",
                        unselectedLanguageAlert: "Error: Please select the code language.",
                        codeEmptyAlert: "Error: Please fill in the code content.",
                        placeholder: "coding now...."
                    },
                    htmlEntities: {
                        title: "HTML Entities"
                    },
                    help: {
                        title: "Help"
                    }
                }
            },
            toolbarIcons: function() {
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                    "help", "info"
                ];
            },
            onload: function() {},
            onresize: function() {},
            onfullscreen: function() {},
            onfullscreenExit: function() {},
            onchange: function() {},
            onwatch: function() {},
            onunwatch: function() {},
            onpreviewing: function() {},
            onpreviewed: function() {},
            onfocus: function() {},
            onblur: function() {},
            onscroll: function() {},
            onpreviewscroll: function() {}
        });
    });
</script>

Thanks for your help!