支持行级同步滚动的 markdown 编辑器

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

PreviewOptions

EditorInstance

PreviewInstance

截图

本作品采用《CC 协议》，转载必须注明作者和本文链接