@mozhou-tech/editor
Advanced tools
The non-official starter kit of the Tiptap editor contains common extensions.
@syfxlin/tiptap-starter-kit 的本地化版本，提供了功能完整的富文本编辑器解决方案。原项目：@syfxlin/tiptap-starter-kit
本项目是一个基于 TipTap 的现代化富文本编辑器扩展包，提供了开箱即用的编辑器组件和丰富的扩展功能。项目采用 TypeScript 开发，支持 React 18+，具有完整的类型定义和现代化的开发体验。
tiptap-starter-kit/
├── src/ # 源代码目录
│ ├── components/ # React 组件
│ │ └── editor/ # TipTapEditor 组件
│ │ ├── TipTapEditor.tsx # 主编辑器组件
│ │ └── styles.css # 编辑器样式
│ ├── extensions/ # TipTap 扩展
│ │ ├── ai/ # AI 助手扩展
│ │ ├── block-menu/ # 块级菜单扩展
│ │ ├── float-menu/ # 浮动菜单扩展
│ │ ├── click-menu/ # 点击菜单扩展
│ │ ├── markdown/ # Markdown 支持扩展
│ │ ├── uploader/ # 文件上传扩展
│ │ └── starter-kit/ # 扩展集合
│ ├── marks/ # 文本标记扩展
│ ├── nodes/ # 节点扩展
│ └── utils/ # 工具函数
├── demo/ # 演示示例
├── api/ # API 模拟服务
├── server/ # 开发服务器
└── dist/ # 构建输出
graph TD
A[TipTapEditor Component] --> B[StarterKit Extension]
B --> C[Core Extensions]
B --> D[Custom Extensions]
C --> E[TipTap Official Extensions]
D --> F[AI Extension]
D --> G[Markdown Extension]
D --> H[Menu Extensions]
D --> I[Upload Extension]
F --> J[AI API Service]
G --> K[Remark Ecosystem]
H --> L[Tippy.js]
I --> M[File Processing]
/ 触发的块级内容插入菜单Some of the extensions are inherited from the official Tiptap extensions, and the changes are minor, so the documentation is not provided for the time being, will be added later.
# 使用 pnpm (推荐)
pnpm add @wanyan/editor @tiptap/core @tiptap/pm react react-dom
# 使用 npm
npm install @wanyan/editor @tiptap/core @tiptap/pm react react-dom
# 使用 yarn
yarn add @wanyan/editor @tiptap/core @tiptap/pm react react-dom
import React, { useState } from "react";
import TipTapEditor from "@wanyan/editor";
function MyEditor() {
const [content, setContent] = useState("# Hello World\n\n开始编辑...");
return (
<TipTapEditor
value={content}
onChange={setContent}
enableAI={true}
aiEndpoint="/api/ai/improve-text"
enableUploader={true}
incrementalUpdate={true} // 启用增量更新模式
placeholder="开始输入内容..."
/>
);
}
import { useEditor } from "@tiptap/react";
import { StarterKit } from "@wanyan/editor";
const editor = useEditor({
extensions: [
StarterKit.configure({
// 禁用某些功能
emoji: false,
// 配置功能选项
heading: {
levels: [1, 2, 3],
},
// 启用 AI 功能
ai: {
enabled: true,
apiEndpoint: "/api/ai/improve-text",
},
}),
],
content: "# Hello World",
});
TipTap 编辑器支持增量更新模式，当外部 value 属性发生变化时，只更新发生变化的部分，而不是替换整个文档内容。这在协作编辑、自动保存等场景中特别有用。
<TipTapEditor
value={content}
onChange={setContent}
incrementalUpdate={true} // 启用增量更新模式
placeholder="开始输入内容..."
/>
增量更新 vs 完全替换对比：
| 模式 | 优势 | 适用场景 |
|---|---|---|
| 增量更新 | 保持光标位置和选择状态，更好的用户体验 | 协作编辑、自动保存、实时同步 |
| 完全替换 | 简单可靠，确保内容完全一致 | 切换文档、应用模板、重置操作 |
详细说明请参考：增量更新文档
<TipTapEditor
value={content}
onChange={setContent}
enableAI={true}
aiEndpoint="https://api.openai.com/v1/chat/completions"
// 其他配置...
/>
const handleUpload = async (files: FileList) => {
// 自定义文件上传逻辑
const uploadedFiles = [];
for (const file of files) {
const formData = new FormData();
formData.append("file", file);
const response = await fetch("/api/upload", {
method: "POST",
body: formData,
});
const result = await response.json();
uploadedFiles.push({
name: file.name,
type: file.type,
size: file.size,
url: result.url,
});
}
return uploadedFiles;
};
<TipTapEditor
value={content}
onChange={setContent}
enableUploader={true}
onUpload={handleUpload}
// 其他配置...
/>;
# 克隆项目
git clone https://github.com/auleti/tiptap-starter-kit.git
cd tiptap-starter-kit
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 启动完整开发环境 (包含 API 服务)
pnpm dev:full
# 构建样式文件
pnpm style
# 构建库文件
pnpm build
# 监听模式构建
pnpm watch
pnpm dev - 启动 Vite 开发服务器pnpm api - 启动模拟 API 服务器pnpm dev:full - 同时启动开发服务器和 API 服务器pnpm build - 构建生产版本pnpm style - 编译 Less 样式文件项目采用模块化架构，主要分为以下几个层次：
组件层 (src/components/)
TipTapEditor.tsx - 主编辑器 React 组件扩展层 (src/extensions/)
starter-kit/ - 扩展集合和配置管理ai/ - AI 助手功能实现markdown/ - Markdown 解析和渲染*-menu/ - 各种交互菜单实现uploader/ - 文件上传处理节点层 (src/nodes/)
标记层 (src/marks/)
// 扩展可以独立配置和禁用
StarterKit.configure({
ai: { enabled: true, apiEndpoint: "/api/ai" },
markdown: { html: false },
uploader: { maxFileSize: 10 * 1024 * 1024 },
});
interface TipTapEditorProps {
value: string;
onChange: (value: string) => void;
enableAI?: boolean;
aiEndpoint?: string;
enableUploader?: boolean;
onUpload?: (files: FileList) => Promise<UploadResult[]>;
}
# 1. 构建样式文件
pnpm style
# 2. 构建库文件
pnpm build
# 3. 发布到私有 npm 仓库
npm publish --registry https://wanyan.co/npm
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | string | - | 编辑器内容 (Markdown 格式) |
onChange | (value: string) => void | - | 内容变化回调 |
placeholder | string | "开始输入内容..." | 占位符文本 |
className | string | "" | 自定义 CSS 类名 |
readOnly | boolean | false | 是否只读模式 |
enableAI | boolean | false | 是否启用 AI 功能 |
aiEndpoint | string | - | AI API 端点地址 |
enableUploader | boolean | false | 是否启用文件上传 |
onUpload | (files: FileList) => Promise<UploadResult[]> | - | 文件上传处理函数 |
onToast | (message: string, type: "success" | "error") => void | - | 消息提示回调 |
| 方法 | 返回类型 | 描述 |
|---|---|---|
getJSON() | any | 获取编辑器 JSON 格式内容 |
getMarkdown() | string | 获取 Markdown 格式内容 |
getHTML() | string | 获取 HTML 格式内容 |
editor | Editor | null | 获取 TipTap 编辑器实例 |
项目支持通过 CSS 变量进行主题定制：
:root {
--tiptap-primary-color: #3b82f6;
--tiptap-background-color: #ffffff;
--tiptap-text-color: #1f2937;
--tiptap-border-color: #e5e7eb;
--tiptap-hover-color: #f3f4f6;
}
.dark {
--tiptap-background-color: #1f2937;
--tiptap-text-color: #f9fafb;
--tiptap-border-color: #374151;
--tiptap-hover-color: #374151;
}
.my-editor {
--tiptap-primary-color: #10b981;
}
.my-editor .rich-text-editor {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-feature项目使用 ESLint 和 TypeScript 进行代码质量控制：
# 代码检查
pnpm lint
# 类型检查
pnpm type-check
本项目基于 MIT 许可证开源。
如果这个项目对你有帮助，请给它一个 ⭐️
Made with ❤️ by Wanyan Team
FAQs
The non-official starter kit of the Tiptap editor contains common extensions.
We found that @mozhou-tech/editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.