1.0.3 • Published 2 years ago
React Markdown Editor
基于 codemirror6 的 markdown 编辑器
特性
使用文档
安装
npm install -S @pingfan.ts/markdown-editor
使用
import React, { useMemo, useRef, useState } from 'react';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import Editor, { EditorInstance } from '@pingfan.ts/markdown-editor';
import upload from '@pingfan.ts/markdown-editor/es/plugins/upload';
import scrollSync from '@pingfan.ts/markdown-editor/es/plugins/scroll-sync';
import markdown from './markdown.txt';
export default () => {
const editorRef = useRef<EditorInstance | null>(null);
const [value, setValue] = useState<string>(markdown);
const extensions = useMemo(
() => [
basicSetup,
EditorView.lineWrapping,
upload({
url: 'api/attachments/upload',
allowedTypes: 'image/*',
transform(res: any) {
return { url: res.data.url };
},
}),
scrollSync(editorRef),
],
[],
);
return (
<Editor
ref={editorRef}
height={300}
value={value}
onChange={setValue}
extensions={extensions}
storageKey="articles-create"
/>
);
};
API
Editor
属性名 | 描述 | 类型 | 默认值 |
---|
toolbar | 工具条 | false | { buttons: ToolbarButton[]; } | -- |
editorPreviewEnableFullScreen | 编辑预览启用全屏,一般和 height 搭配使用 | boolean | true |
previewOptions | 预览选项 | PreviewOptions | -- |
storageKey | 自动保存,下次初始化时可恢复上一次保存的内容 | string | -- |
value | 编辑器内容 | string | -- |
height | 高度 | number | string | -- |
minHeight | 最小高度 | number | string | -- |
maxHeight | 最大高度 | number | string | -- |
extensions | codemirror 扩展 | Extension[] | -- |
onChange | 内容变化时的回调 | (value: string) => void | -- |
ref | -- | Ref<EditorInstance> | -- |
PreviewOptions
属性名 | 描述 | 类型 | 默认值 |
---|
render | 自定义渲染 | (markdown: string) => ReactNode | -- |
interval | 刷新间隔 | number | 1000 |
remarkPlugins | remark 插件 | PluggableList | -- |
rehypePlugins | rehype 插件 | PluggableList | -- |
markdownOptions | react-markdown 选项 | Partial<ReactMarkdownOptions> | -- |
EditorInstance
名称 | 说明 | 类型 |
---|
getContainer | 获取编辑器容器DOM | () => HTMLDivElement | null |
getEditorView | 获取 codemirror 实例 | () => EditorView | null |
getToolbar | 获取 Toolbar 实例 | () => ToolbarInstance | null |
getPreview | 获取 Preview 实例 | () => PreviewInstance | null |
getDisplayMode | 获取显示模式 | () => { fullScreen: boolean; preview: boolean; editorPreview: boolean; } |
toggleFullScreen | 全屏切换 | () => void |
togglePreview | 预览切换 | () => void |
toggleEditorPreview | 编辑预览切换 | () => void |
PreviewInstance
名称 | 说明 | 类型 |
---|
getMarkdown | 获取 markdown 内容 | () => string |
setMarkdown | 设置 markdown 内容 | (markdown: string) => void |
debounceSetMarkdown | 消抖设置 markdown 内容 | (markdown: string) => void |
setMarkdownOptions | 设置 react-markdown 选项 | (markdownOptions: Partial<ReactMarkdownOptions>) => void |
getContainer | 获取预览容器DOM | () => HTMLDivElement | null |
getHast | 获取hast | () => Hast |