React-SimpleMDE

Simple Markdown Editor For React, base on SimpleMDE.

• No Need jQuery
• Support Custom Toobar, and toobar icon buildin css with base4 svg
• Support Local Image
• Support DOMPurify, prevent XSS Issue.
• Support Typescript, include some SimpleMDE's types.
• Support paste image to upload
• Support add more codemirror key map
• And full SimpleMDE's Feature

How To Use MarkdownEditor

Demo

npm install easymde --save
npm install react-markdown-editor-smde --save

import 'easymde/src/css/easymde.css';
import 'codemirror/lib/codemirror.css'
import MarkdownEditor from 'react-markdown-editor-smde'
const Editor = () => {
  const el = useRef();
  function onSubmit() {
    if (el.current) {
      const md = el.current.mdValue;
    }
  }
  function doReset() {
    if (el.current) {
      el.current.mdValue = '';
    }
  }
  return (
    <div>
      <MarkdownEditor ref={el} />
      <button onClick={onSubmit}>Submit</button>
      <button onClick={doReset}>Reset</button>
    </div>
  )
}

• use ref to get Editor instance
  • const md = ref.mdValue get markdown value
  • ref.mdValue = md set markdown value
  • const html = ref.html get markdown value
  • ref.$editor get SimpleMd's instance (SimpleMarkdownEditor)
• And MarkdownEditor has static vars
  • MarkdownEditor.ToolBarFuncs: default ToolBar Functions
  • MarkdownEditor.defaultToolBar: default ToolBar item

MarkdownEditor props

| Props | Note | Required | | -------- | -------- | -------- | | editorConfig | SimpleMd's Config | NO | | height | Editor Fix Height, inclues toolbar, and status bar | NO | | minHeight | Editor min height, default 300 | NO | | initialValue | If set, will customize the initial value of the editor. | NO | | toolbar | toolbar config, default has toolbar | NO | | outputDOMPurify | Output HTML DOMPurify，default ON, prevent xss issues | NO | | previewDOMPurify | Output HTML DOMPurify，default ON, prevent xss issues | NO | | imageUploadFun | image upload async function, default use Browser FileReader | NO | | moreExtraKeys | add more key map to codemirror | NO |

Most Markdown Editor (include SimpleMDE) also support html, this will cause XSS issues. So highly recommended you DO NOT turn outputDOMPurify and previewDOMPurify off.

How to Custom Toolbar(toolbar props)

MarkdownEditor still use SimpleMd's mothods to Custom toobar, but more Lazy, only toolbar props ...

toolbar's type is : boolean | (MarkdownEditorToolBarName | '|' | MarkdownEditorToolBarItem)[]

export interface MarkdownEditorToolBarItem {
  name: MarkdownEditorToolBarName | string;
  action?: ((editor: SimpleMarkdownEditor) => void) | string;
  className?: string;
  title?: string;
}

• string[]: use SimpleMd's buidin Names
  • bold
  • italic
  • strikethrough
  • heading
  • heading-smaller
  • heading-bigger
  • heading-1
  • heading-2
  • heading-3
  • code
  • quote
  • unordered-list
  • ordered-list
  • clean-block
  • link
  • image
  • table
  • horizontal-rule
  • preview
  • side-by-side
  • fullscreen
  • undo
  • redo
  • guide;
  • |
  • And plus one choose-image (choose local image, and combine with imageUploadFun to upload image to your server)
• MarkdownEditorToolBarItem[]: SimpleMd's buidin toolbar functions
  • toggleBold
  • toggleItalic
  • toggleStrikethrough
  • toggleBlockquote
  • toggleHeadingSmaller
  • toggleHeadingBigger
  • toggleHeading1
  • toggleHeading2
  • toggleHeading3
  • toggleCodeBlock
  • toggleUnorderedList
  • toggleOrderedList
  • cleanBlock
  • drawLink
  • drawImage
  • drawTable
  • drawHorizontalRule
  • undo
  • redo
  • togglePreview
  • toggleSideBySide
  • toggleFullScreen

more key map

<MarkdownEditorField
  moreExtraKeys={{
    'Ctrl-S': function(cm) {
      onSubmit();
    },
    'Cmd-S': function(cm) {
      onSubmit();
    }
  }}
/>

Others

• MarkdownEditorField,like normal form component, support value and onChange props.
• mdToHTML() and htmlDomSanitize()