Vditor - Markdown编辑器使用

1、安装

yarn add vditor

2、代码

import 'vditor/dist/index.css';
import React, { useEffect } from 'react';
import Vditor from 'vditor';
import './index.less';

const App = ({ setVditorValue, vditorValue }: any) => {
  const [vd, setVd] = React.useState<Vditor>();
  useEffect(() => {
    const vditor = new Vditor('vditor', {
      toolbar: [
        'emoji',
        'headings',
        'bold', //1
        'italic', //1
        'strike', //
        'link',
        '|',
        'list',
        'ordered-list',
        'check',
        'outdent',
        'indent',
        '|',
        'quote',
        'line',
        'code',
        'inline-code',
        'insert-before',
        'insert-after',
        '|',
        'upload',
        // "record",
        'table',
        '|',
        'undo',
        'redo',
        '|',
        'fullscreen',
        'edit-mode',
        {
          name: 'more',
          toolbar: [
            'both',
            'code-theme',
            'content-theme',
            'export',
            'outline',
            'preview',
            'devtools',
            'info',
            'help',
          ],
        },
      ],
      minHeight: 450,
      after: () => {
        vditor.setValue(vditorValue);
        console.log(vditorValue, '初始值');
        setVd(vditor);
      },
      upload: {
        url: '',
        token: getCookie('token') || '',
        setHeaders() {
          return {
            token: getCookie('token') || '',
          };
        },
        accept: 'image/jpeg,image/png,image/gif,image/jpg,image/bmp', // 图片格式
        success(editor, msg) {
          vditor?.focus();
          console.log('上传成功了', editor, msg, JSON.parse(msg));
          const { rows, flag } = JSON.parse(msg);
          if (flag && flag.retCode === '0') {
            showSuccess('图片上传成功');
            const { fileName, shareUrl } = rows[0];
            vditor?.insertValue(`![${fileName}](${shareUrl})`);
          }
        },
        error(msg) {
          showError('图片上传失败');
        },
      },
      input: (value) => {
        // setVditorValue(vditor.getHTML());
        setVditorValue(vditor.getValue());
      },
      mode: 'sv',
    });
  }, []);

  return (
    <div>
      <div id="vditor" className="vditor" />
    </div>
  );
};

export default App;

3、使用效果