Yuque Editor

基于 LakeX 的强大的所见即所得编辑器，提供了编辑器、查看器和切换组件三个核心功能。

特性

• 🚀 基于 React 和 TypeScript 开发
• 📝 所见即所得的编辑体验
• 🎨 支持多种编辑功能
• 🔄 支持编辑器和查看器的无缝切换
• 💡 基于语雀 LakeX 引擎
• 📦 轻量级设计，最小化依赖

安装

# 安装编辑器
npm install yuque-editor

# 安装必需的 peer dependencies
npm install react react-dom @alipay/lakex @alipay/lakex-core

快速开始

import { YuqueEditor, YuqueViewer, YuqueToggle } from 'yuque-editor';
// 导入样式
import '@alipay/lakex/dist/index.css';
import 'yuque-editor/dist/style.css';

// 使用编辑器
function MyEditor() {
  return (
    <YuqueEditor
      defaultValue="<p>初始内容</p>"
      onChange={(content) => console.log('内容变化:', content)}
      config={{
        // 自定义配置
        uploadImage: async (file) => {
          // 实现您的图片上传逻辑
          return {
            url: '图片URL',
            name: file.name
          };
        }
      }}
    />
  );
}

// 使用查看器
function MyViewer() {
  return (
    <YuqueViewer
      value="<p>要展示的内容</p>"
    />
  );
}

// 使用切换组件
function MyToggle() {
  return (
    <YuqueToggle
      value="<p>内容</p>"
      onChange={(content) => console.log('内容变化:', content)}
      defaultMode="view"
    />
  );
}

API 文档

YuqueEditor

编辑器组件，提供富文本编辑功能。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | defaultValue | string | '<p>欢迎使用编辑器</p>' | 编辑器的初始内容 | | onChange | (value: string) => void | - | 内容变化时的回调函数 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 | | config | object | - | LakeX 编辑器配置项 |

YuqueViewer

查看器组件，用于展示富文本内容。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | string | - | 要展示的内容 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 |

YuqueToggle

切换组件，支持编辑器和查看器之间的切换。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | string | - | 内容 | | onChange | (value: string) => void | - | 内容变化时的回调函数 | | defaultMode | 'edit' | 'view' | 'view' | 默认模式 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 |

优化说明

为了保持包的轻量级：

1. 所有主要依赖都设置为 peer dependencies
2. 使用 tree-shaking 优化打包体积
3. 移除了对 antd 等重型 UI 库的依赖
4. 支持按需加载样式
5. 最小化运行时依赖

浏览器兼容性

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

贡献指南

欢迎提交 Issue 和 Pull Request。

许可证

MIT License