Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-02 15:44:28 -06:00
Code Issues Releases Wiki Activity

Fix indenting and some leftover old JS

Browse Source
This commit is contained in:
Jeroen Akkerman 2021-10-06 01:51:02 +02:00
parent 86e40bcf4a
commit 551c84bc01
1 changed files with 116 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
README.md
View File

@ -190,7 +190,7 @@ easyMDE.value('New input for **EasyMDE**');
- **typeNotAllowed**: The user send a file type which doesn't match the `imageAccept` list, or the server returned this error code. Defaults to `This image type is not allowed.`. - **typeNotAllowed**: The user send a file type which doesn't match the `imageAccept` list, or the server returned this error code. Defaults to `This image type is not allowed.`.
- **fileTooLarge**: The size of the image being imported is bigger than the `imageMaxSize`, or if the server returned this error code. Defaults to `Image #image_name# is too big (#image_size#).\nMaximum file size is #image_max_size#.`. - **fileTooLarge**: The size of the image being imported is bigger than the `imageMaxSize`, or if the server returned this error code. Defaults to `Image #image_name# is too big (#image_size#).\nMaximum file size is #image_max_size#.`.
- **importError**: An unexpected error occurred when uploading the image. Defaults to `Something went wrong when uploading the image #image_name#.`. - **importError**: An unexpected error occurred when uploading the image. Defaults to `Something went wrong when uploading the image #image_name#.`.
- **errorCallback**: A callback function used to define how to display an error message. Defaults to `function(errorMessage) {alert(errorMessage);};`. - **errorCallback**: A callback function used to define how to display an error message. Defaults to `(errorMessage) => alert(errorMessage)`.
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing). - **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page or pass in using the `hljs` option. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">` - **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page or pass in using the `hljs` option. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
- **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`. - **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`.
@ -218,83 +218,83 @@ easyMDE.value('New input for **EasyMDE**');
Most options demonstrate the non-default behavior: Most options demonstrate the non-default behavior:
```JavaScript ```js
const editor = new EasyMDE({ const editor = new EasyMDE({
autofocus: true, autofocus: true,
autosave: { autosave: {
enabled: true, enabled: true,
uniqueId: "MyUniqueID", uniqueId: "MyUniqueID",
delay: 1000, delay: 1000,
submit_delay: 5000, submit_delay: 5000,
timeFormat: { timeFormat: {
locale: 'en-US', locale: 'en-US',
format: { format: {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: '2-digit', day: '2-digit',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
}, },
}, },
text: "Autosaved: " text: "Autosaved: "
}, },
blockStyles: { blockStyles: {
bold: "__", bold: "__",
italic: "_", italic: "_",
}, },
element: document.getElementById("MyID"), element: document.getElementById("MyID"),
forceSync: true, forceSync: true,
hideIcons: ["guide", "heading"], hideIcons: ["guide", "heading"],
indentWithTabs: false, indentWithTabs: false,
initialValue: "Hello world!", initialValue: "Hello world!",
insertTexts: { insertTexts: {
horizontalRule: ["", "\n\n-----\n\n"], horizontalRule: ["", "\n\n-----\n\n"],
image: ["![](http://", ")"], image: ["![](http://", ")"],
link: ["[", "](https://)"], link: ["[", "](https://)"],
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"], table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
}, },
lineWrapping: false, lineWrapping: false,
minHeight: "500px", minHeight: "500px",
parsingConfig: { parsingConfig: {
allowAtxHeaderWithoutSpace: true, allowAtxHeaderWithoutSpace: true,
strikethrough: false, strikethrough: false,
underscoresBreakWords: true, underscoresBreakWords: true,
}, },
placeholder: "Type here...", placeholder: "Type here...",
previewClass: "my-custom-styling", previewClass: "my-custom-styling",
previewClass: ["my-custom-styling", "more-custom-styling"], previewClass: ["my-custom-styling", "more-custom-styling"],
previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
previewRender: (plainText, preview) => { // Async method previewRender: (plainText, preview) => { // Async method
setTimeout(() => { setTimeout(() => {
preview.innerHTML = customMarkdownParser(plainText); preview.innerHTML = customMarkdownParser(plainText);
}, 250); }, 250);
return "Loading..."; return "Loading...";
}, },
promptURLs: true, promptURLs: true,
promptTexts: { promptTexts: {
image: "Custom prompt for URL:", image: "Custom prompt for URL:",
link: "Custom prompt for URL:", link: "Custom prompt for URL:",
}, },
renderingConfig: { renderingConfig: {
singleLineBreaks: false, singleLineBreaks: false,
codeSyntaxHighlighting: true, codeSyntaxHighlighting: true,
sanitizerFunction: (renderedHTML) => { sanitizerFunction: (renderedHTML) => {
// Using DOMPurify and only allowing <b> tags // Using DOMPurify and only allowing <b> tags
return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']}) return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
}, },
}, },
shortcuts: { shortcuts: {
drawTable: "Cmd-Alt-T" drawTable: "Cmd-Alt-T"
}, },
showIcons: ["code", "table"], showIcons: ["code", "table"],
spellChecker: false, spellChecker: false,
status: false, status: false,
status: ["autosave", "lines", "words", "cursor"], // Optional usage status: ["autosave", "lines", "words", "cursor"], // Optional usage
status: ["autosave", "lines", "words", "cursor", { status: ["autosave", "lines", "words", "cursor", {
className: "keystrokes", className: "keystrokes",
defaultValue: (el) => { defaultValue: (el) => {
el.setAttribute('data-keystrokes', 0); el.setAttribute('data-keystrokes', 0);
}, },
@ -303,13 +303,13 @@ const editor = new EasyMDE({
el.innerHTML = keystrokes + " Keystrokes"; el.innerHTML = keystrokes + " Keystrokes";
el.setAttribute('data-keystrokes', keystrokes); el.setAttribute('data-keystrokes', keystrokes);
}, },
}], // Another optional usage, with a custom status bar item that counts keystrokes }], // Another optional usage, with a custom status bar item that counts keystrokes
styleSelectedText: false, styleSelectedText: false,
sideBySideFullscreen: false, sideBySideFullscreen: false,
syncSideBySidePreviewScroll: false, syncSideBySidePreviewScroll: false,
tabSize: 4, tabSize: 4,
toolbar: false, toolbar: false,
toolbarTips: false, toolbarTips: false,
}); });
``` ```
@ -352,41 +352,42 @@ Customize the toolbar using the `toolbar` option.
Only the order of existing buttons: Only the order of existing buttons:
```JavaScript ```js
const easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: ["bold", "italic", "heading", "|", "quote"] toolbar: ["bold", "italic", "heading", "|", "quote"]
}); });
``` ```
All information and/or add your own icons All information and/or add your own icons
```Javascript ```js
const easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: [{ toolbar: [
name: "bold", {
action: EasyMDE.toggleBold, name: "bold",
className: "fa fa-bold", action: EasyMDE.toggleBold,
title: "Bold", className: "fa fa-bold",
}, title: "Bold",
{ },
name: "custom", {
action: function customFunction(editor){ name: "custom",
// Add your own code action: function customFunction(editor) {
}, // Add your own code
className: "fa fa-star", },
title: "Custom Button", className: "fa fa-star",
}, title: "Custom Button",
"|" // Separator },
// [, ...] "|" // Separator
] // [, ...]
]
}); });
``` ```
Put some buttons on dropdown menu Put some buttons on dropdown menu
```Javascript ```js
const easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: [{ toolbar: [{
name: "heading", name: "heading",
action: EasyMDE.toggleHeadingSmaller, action: EasyMDE.toggleHeadingSmaller,
className: "fa fa-header", className: "fa fa-header",
@ -418,8 +419,8 @@ const easyMDE = new EasyMDE({
} }
] ]
}, },
// [, ...] // [, ...]
] ]
}); });
``` ```
@ -446,13 +447,13 @@ Shortcut (Windows / Linux) | Shortcut (macOS) | Action
Here is how you can change a few, while leaving others untouched: Here is how you can change a few, while leaving others untouched:
```JavaScript ```js
const editor = new EasyMDE({ const editor = new EasyMDE({
shortcuts: { shortcuts: {
"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
"toggleCodeBlock": null, // unbind Ctrl-Alt-C "toggleCodeBlock": null, // unbind Ctrl-Alt-C
"drawTable": "Cmd-Alt-T", // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut "drawTable": "Cmd-Alt-T", // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
} }
}); });
``` ```
@ -467,10 +468,10 @@ The list of actions that can be bound is the same as the list of built-in action
You can catch the following list of events: https://codemirror.net/doc/manual.html#events You can catch the following list of events: https://codemirror.net/doc/manual.html#events
```JavaScript ```js
const easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", function(){ easyMDE.codemirror.on("change", () => {
console.log(easyMDE.value()); console.log(easyMDE.value());
}); });
``` ```
@ -479,7 +480,7 @@ easyMDE.codemirror.on("change", function(){
You can revert to the initial text area by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance. You can revert to the initial text area by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance.
```JavaScript ```js
const easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
// ... // ...
easyMDE.toTextArea(); easyMDE.toTextArea();