How to embed editor.md on a Moodle site? #1015
Description
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!