lizhengnacl / wrap-md-editor

React Component Based on Editor.md
https://www.npmjs.com/package/wrap-md-editor
8 stars 9 forks source link
component markdown markdown-editor react

React Component Based on Editor.md

The html template should includes the following tags.

css
<link rel="stylesheet" href="https://s0.meituan.net/xm/open-platform-static/editormd/css/editormd.css" />
js
<script src="https://github.com/lizhengnacl/wrap-md-editor/raw/master//s0.meituan.net/xm/static/jquery/1.11.3/jquery.min.js"></script>
<script src="https://s0.meituan.net/xm/open-platform-static/editormd/editormd.js"></script>

Install

npm install wrap-md-editor -S

Example

the edit mode
import React, {Component} from 'react';
import {render} from 'react-dom';
import Editor from 'wrap-md-editor';

render(
    <Editor config={
        {
            markdown: // testEditor.getMarkdown().replace(/`/g, '\\`')
            `## Test
            \`\`\`
            console.log('what can i do for you')
            \`\`\`

            # 123123`,
            onload: (editor, func) => {
                let md = editor.getMarkdown();
                let html = editor.getHTML();
                debugger
            }
        }
    }/>,
    document.querySelector('#root')
);
the show mode
import React, {Component} from 'react';
import {render} from 'react-dom';
import Editor from 'wrap-md-editor';

render(
    <Editor.EditorShow config={
        {
            markdown: // testEditor.getMarkdown().replace(/`/g, '\\`')
            `## Test
            \`\`\`
            console.log('what can i do for you')
            \`\`\`

            # 123123`
        }
    }/>,
    document.querySelector('#root')
);

Doc

Read the document for detail.