react-markdown-editor-smde v2.0.3

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

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()