Recently, I was looking for a Markdown editor suitable for the Web side, but I didn’t find a suitable editor until I found SimpleMDE. You can also check the corresponding instructions on Github.

The installation

  • throughnpm
npm install simplemde --save
Copy the code
  • throughbower
bower install simplemde --save
Copy the code
  • It can also be referenced directly in the browser through a CDN connection or a local file
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
Copy the code

Begin to use

If a textaREA is not specified, the first TextaREA of the current page is used by default

<script>
var simplemde = new SimpleMDE();
</script>
Copy the code

A textarea can also be specified explicitly

<script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID")}); </script>Copy the code

Or use JQuery

<script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
</script>
Copy the code

Gets/sets the content

simplemde.value();
Copy the code
simplemde.value("This text will appear in the editor");
Copy the code

Get rendered content (default HTML)

var val = simplemde.value()
var html = simplemde.markdown(val)
Copy the code

configuration

On the first code

var simplemde = new SimpleMDE({
    element: document.getElementById("demo"),
    spellChecker: false,
    autofocus: true,
    autoDownloadFontAwesome: false,
    placeholder: "Type here...",
    autosave: {
        enabled: true,
        uniqueId: "demo",
        delay: 1000,
    },
    tabSize: 4,
    status: false,
    lineWrapping: false,
    renderingConfig: {
        codeSyntaxHighlighting: true}});Copy the code

Parameter Description

  • Download the Font Awesome autoDownloadFontAwesome: true will force, false will not download, the default value is undefined, automatically check, because the network problems, and then download, suggest set to false, the introduction of the manual

  • AutoSave: Indicates whether to automatically save. The default value is false

autosave: {
    enabled: true,
    uniqueId: "demo"// Delay: 10000,// default interval is 10s},Copy the code
  • Toolbar: Set tofalseThe title bar is not displayed. The title bar is displayed by default

The default title bar

  • RenderingConfig:
    • Codesyntaxconsidering: Set totrueWill usehighlight.jsCode highlight, default isfalseIf it is set totrue, please introduce in the page
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
Copy the code

The event

var simplemde = new SimpleMDE();
simplemde.codemirror.on("change".function(){
	console.log(simplemde.value());
});

simplemde.isPreviewActive(); // returns boolean
simplemde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value
Copy the code

The full-screen preview function is enabled by default

When editing text with Markdown, the live preview function is turned on

Simplemde. ToggleSideBySide () / / open the full screen preview in real timeCopy the code

When this function is enabled, it will be in full screen state. In fact, after editing text, we will submit it directly to the background, usually with a title, but when this function is enabled, it will be in full screen state. We need to modify the default CSS file to add titles and buttons similar to the Markdown editor for Gold digg and Brief books