React Markdown Editor

基于 codemirror6 的 markdown 编辑器

特性

• 支持编辑预览同步滚动（滚动时顶部绝对对齐预览内容），支持光标改变时滚动到光标位置（行对齐）
• 支持粘贴和拖拽上传图片，可显示上传进度
• 支持 emoji 表情
• 插入链接和图片支持快速修改url、alt、title等变量属性（tab 键可跳到下一变量，esc 退出修改）
• 预览采用 react-markdown 解析，支持语法高亮
• 支持自定义预览渲染
• 支持codemirror 扩展

项目地址

使用文档和demo地址

安装

复制
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

截图