支援行級同步滾動的 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 協議》，轉載必須註明作者和本文連結