react-markdown-editor-lite

556 阅读1分钟

一、安装

安装react-markdown-editor-lite:

npm i react-markdown-editor-lite

安装markdown-it

npm i markdown-it

二、输入

  const mdEditor = useRef(null);
  const mdParser = new MarkdownIt(/* Markdown-it options */);
  
    const onPaste = event => {
        const { items } = event.clipboardData;
        if (items && items[0].type.indexOf('image') > -1) {
            const file = items[0].getAsFile();
            const data = new FormData();
            data.append('file', file);
            post('', data).then(res =>            {
            if (res.code === 0) {
                mdEditor.current.insertText(
                    `![](/vuln_operation/download_picture?filepath=$        {res.data})`
                );
            }
        });
    }
  };
  
  ......
    <MdEditor
        ref={mdEditor}
        value={value}
        renderHTML={text => mdParser.render(text)}
        onChange={({ html, text}) => onChange(text)}
      />

三、显示

const md = require('markdown-it')();
.....
<div dangerouslySetInnerHTML={{ __html: md.render(value) }}></div>