# tui-editor

TuiEditor (opens new window) 组件基于 tui-editor 封装，是一款 Markdown 编辑器；tui-editor 官网 (opens new window)，GitHub (opens new window)。

# Editor

# Props

名称	类型	默认值	说明
value	String	" "	编辑器的内容.
toolbars	string[]	`toolbarItems`	tui.editor 工具栏的配置.
height	String	'300px'	编辑器的高度.
initialEditType	String	'markdown'
previewStyle	'tab' \| 'vertical' \| undefined	undefined
onChange	Function(value: string, editor?: Editor)
onLoad	Function(editor?: Editor)
onFocus	Function(param: { source: SourceType })
onBlur	Function(param: { source: SourceType })

const toolbarItems: string[] = [
  'heading',
  'bold',
  'italic',
  'strike',
  'divider',
  'hr',
  'quote',
  'divider',
  'ul',
  'ol',
  'task',
  'indent',
  'outdent',
  'divider',
  'table',
  'image',
  'link',
  'divider',
  'code',
  'codeblock',
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Viewer

# Props

名称	类型	默认值	说明
value	String	" "	显示的内容.

# 上传图片

组件统一了整个后台编辑器的上传图片api地址。相关代码如下,你可以自定义修改：

import React, { useMemo, useRef } from 'react';
import request from '@/utils/request';
import Editor from '@toast-ui/editor';
import { Editor as EditorReact } from '@toast-ui/react-editor';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

const toolbarItems: string[] = [
  'heading',
  'bold',
  'italic',
  'strike',
  'divider',
  'hr',
  'quote',
  'divider',
  'ul',
  'ol',
  'task',
  'indent',
  'outdent',
  'divider',
  'table',
  'image',
  'link',
  'divider',
  'code',
  'codeblock',
];

type SourceType = 'wysiwyg' | 'markdown';

export interface TuiEditorProps {
  value: string;
  height?: string;
  toolbars?: string[];
  previewStyle?: 'tab' | 'vertical';
  initialEditType?: SourceType;
  useCommandShortcut?: boolean;
  onLoad?: (editor: Editor) => void;
  onChange?: (value: string, editor?: Editor) => void;
  stateChange?: (param: any) => void;
  onFocus?: (param: { source: SourceType }) => void;
  onBlur?: (param: { source: SourceType }) => void;
}

const TuiEditor: React.FC<TuiEditorProps> = props => {
  const {
    value = '',
    height = '300px',
    toolbars = toolbarItems,
    previewStyle,
    initialEditType = 'markdown',
    useCommandShortcut = true,
    onLoad,
    onChange,
    stateChange,
    onFocus,
    onBlur,
  } = props;

  const editorRef = useRef<Editor>();

  const events = useMemo(() => {
    let ret = {
      load: (editor: any) => {
        if (!editorRef.current) {
          editorRef.current = editor;
        }

        if (onLoad) {
          onLoad(editor);
        }
      },
      change: (/* param: { source: SourceType | 'viewer'; data: MouseEvent } */) => {
        let value = editorRef.current ? editorRef.current.getMarkdown() : '';

        if (onChange) {
          onChange(value, editorRef.current);
        }
      },
    };

    if (stateChange) {
      ret['stateChange'] = stateChange;
    }

    if (onFocus) {
      ret['focus'] = onFocus;
    }

    if (onBlur) {
      ret['blur'] = onBlur;
    }

    return ret;
  }, [1]);

  return (
    <EditorReact
      initialValue={value}
      toolbarItems={toolbars}
      previewStyle={previewStyle}
      height={height}
      initialEditType={initialEditType}
      useCommandShortcut={useCommandShortcut}
      events={events}
      hooks={{
        addImageBlobHook: (fileOrBlob, callback) => {
          let param = new FormData();
          param.append('file', fileOrBlob);

          request('/uploads', {
            headers: { 'Content-Type': 'multipart/form-data' },
            method: 'POST',
            data: param,
          })
            .then(res => {
              const { data } = res;
              const { url, name } = data;
              callback(url, name);
            })
            .catch(err => {
              console.log(err);
            });
        },
      }}
    />
  );
};

export default TuiEditor;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

# Example

在线链接 (opens new window)

# 卸载

如果你不需要此组件，然后代码打包感觉不需要，可以卸载此组件。

1、CMD 运行

npm uninstall @toast-ui/react-editor

2、删除组件文件目录 @/components/TuiEditor (opens new window)

CKEditor →