yuque-editor

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	-	自定义样式

优化说明

为了保持包的轻量级：

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

浏览器兼容性

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

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

贡献指南

欢迎提交 Issue 和 Pull Request。

许可证

MIT License