Nacho Portmanteau Meltdown

    @erda-ui/react-markdown-editor-lite
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.9 • Public • Published

    react-markdown-editor-lite

    MIT License Workflow

    中文说明

    Differences with origin

    • change onImageUpload parameters
    • support for additional left and right nodes of the toolbar
    • separate html rendering styles, which can be imported by yourself
    • remove IE9 icon style support, reduce style file size
    • use text instead of icon for toggle mode
    • change mode toggle button to left, other buttons to right, and remove show_all mode

    Feature

    • A light-weight(20KB zipped) Markdown editor of React component
    • Supports TypeScript
    • Supports custom markdown parser
    • Full markdown support
    • Supports pluggable function bars
    • Full control over UI
    • Supports image uploading and dragging
    • Supports synced scrolling between editor and preview

    Demo

    Online demo
    https://harrychen0506.github.io/react-markdown-editor-lite/

    Default configuration

    image

    Pluggable bars

    image

    Install

    npm install react-markdown-editor-lite --save
    # or
    yarn add react-markdown-editor-lite

    Basic usage

    Following steps:

    • Import react-markdown-editor-lite
    • Register plugins if required
    • Initialize a markdown parser, such as markdown-it
    • Start usage
    // import react, react-markdown-editor-lite, and a markdown parser you like
    import * as React from 'react'
    import * as ReactDOM from 'react-dom'
    import MarkdownIt from 'markdown-it'
    import MdEditor from 'react-markdown-editor-lite'
    // import style manually
    import 'react-markdown-editor-lite/lib/index.css';
    // import html rendering style
    import 'react-markdown-editor-lite/lib/html.css';
    
    // Register plugins if required
    // MdEditor.use(YOUR_PLUGINS_HERE);
    
    // Initialize a markdown parser
    const mdParser = new MarkdownIt(/* Markdown-it options */);
    
    // Finish!
    function handleEditorChange({html, text}) {
      console.log('handleEditorChange', html, text)
    }
    export default (props) => {
      return (
        <MdEditor
          style={{ height: "500px" }}
          renderHTML={(text) => mdParser.render(text)}
          onChange={handleEditorChange}
        />
      )
    }

    Usage in server-side render

    If you are using a server-side render framework, like Next.js, Gatsby, please use client-side render for this editor.

    For example, Next.js has next/dynamic, Gatsby has loadable-components

    Following is a example for Next.js:

    import dynamic from 'next/dynamic';
    import 'react-markdown-editor-lite/lib/index.css';
    
    const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
      ssr: false
    });
    
    export default function() {
      return (
        <MdEditor
          style={{ height: "500px" }}
          renderHTML={/* Render function */}
        />
      )
    }

    Import in Browser

    Since 1.1.0, You can add script and link tags in your browser and use the global variable ReactMarkdownEditorLite.

    You can download these files directly from cdnjs jsdelivr unpkg

    Note: you should import react before ReactMarkdownEditorLite.

    For example, in webpack, you import ReactMarkdownEditorLite by script tag in your page, and write webpack config like this:

    externals: {
      react: 'React',
      'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
    }

    More demos

    Authors

    License

    MIT

    Install

    npm i @erda-ui/react-markdown-editor-lite

    DownloadsWeekly Downloads

    39

    Version

    1.4.9

    License

    MIT

    Unpacked Size

    208 kB

    Total Files

    63

    Last publish

    Collaborators

    • liyaoyao
    • daskyrk
    • kuimo
    • zhangpfsss
    • zhangxj718
    • zero-rock
    • michael8512
    • sherotree
    • hujiahao-hjh