5分钟快速集成强大的协同文档编辑器到您的 Web 应用。
支持 Vue、React、Angular 及原生 HTML/JS。
<!-- 1. 引入 SDK 样式 -->
<link rel="stylesheet" href="cdn/arco.css">
<link rel="stylesheet" href="cdn/px-editor.css">
<!-- 2. 引入依赖库 -->
<script src="cdn/vue.global.prod.js"></script>
<script src="cdn/arco-vue.min.js"></script>
<script src="cdn/arco-vue-icon.min.js"></script>
<script src="cdn/echarts.min.js"></script>
<script src="cdn/mind-elixir.js"></script>
<!-- 3. 引入 JitWord SDK -->
<script src="cdn/px-editor.standalone.js"></script>
<!-- 4. 创建编辑器容器 -->
<div id="editor-container" style="height: 100vh;"></div>
<!-- 5. 初始化编辑器 -->
<script>
const { Jitword } = window.PxEditor;
const editor = new Jitword({
hold: "editor-container",
appTitle: "JitWord 协作文档",
baseApiUrl: '/api/v1',
wsServer: 'wss://your-server.com/ws',
enableCollaboration: true
});
</script>为开发者提供完整的文档协作解决方案
只需引入3个文件，即可在您的应用中运行功能完整的协同文档编辑器。无需复杂的配置，开箱即用。
基于 Yjs 和 WebSocket 的实时协同引擎，支持多人同时编辑、光标同步、冲突自动解决。
完美支持 Vue、React、Angular 以及原生 HTML/JS 项目。无论您使用什么技术栈，都能轻松集成。
提供完整的实例 API 和 REST API，支持文档管理、评论、版本控制、页面设置等全方位功能。
内置离线模式，无需后端即可运行。数据存储在浏览器 IndexedDB 中，适合演示和独立应用场景。
支持 JWT 认证、文档权限控制、操作审计日志。符合企业级应用的安全要求。
SDK 前端编辑器已GPL3.0协议开源使用，仅供个人学习，企业试用和非商业用途，如需商业用途请联系我们授权：
如需商业版授权，请联系：13388992167
只需3步，即可在您的应用中集成 JitWord 编辑器
在 HTML 中引入 SDK 样式和依赖库（共7个文件）
<!-- 1. 引入样式文件 -->
<link rel="stylesheet" href="cdn/arco.css">
<link rel="stylesheet" href="cdn/px-editor.css">
<!-- 2. 引入依赖库 -->
<script src="cdn/vue.global.prod.js"></script>
<script src="cdn/arco-vue.min.js"></script>
<script src="cdn/arco-vue-icon.min.js"></script>
<script src="cdn/echarts.min.js"></script>
<script src="cdn/mind-elixir.js"></script>
<!-- 3. 引入 JitWord SDK -->
<script src="cdn/px-editor.standalone.js"></script>在页面中添加一个容器元素
<div id="editor-container" style="height: 100vh;"></div>使用 Jitword 类初始化编辑器实例（建议在 window.onload 中执行）
const { Jitword } = window.PxEditor;
const editor = new Jitword({
hold: "editor-container",
appTitle: "JitWord 协作文档",
logo: "https://your-domain.com/logo.png",
baseApiUrl: '/api/v1',
wsServer: 'wss://your-server.com/ws',
enableCollaboration: true,
currentDocumentId: 'doc-123',
user: {
name: 'User-001',
color: '#165DFF'
},
onSave: ({ content }) => {
console.log('文档保存:', content);
}
});完整的 API 参考，助力深度定制
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
hold |
string | HTMLElement | 是 | 编辑器挂载的 DOM 节点 ID 或元素 |
appTitle |
string | 否 | 应用标题，默认"JitWord 协同文档" |
logo |
string | 否 | Logo 图片 URL |
locale |
'zh' | 'en' | 否 | 界面语言，默认'zh' |
theme |
'light' | 'dark' | 否 | 主题模式，默认'light' |
editable |
boolean | 否 | 是否可编辑，默认true |
enableCollaboration |
boolean | 否 | 是否启用协同编辑，默认true |
wsServer |
string | 协同时 | WebSocket 服务器地址 |
currentDocumentId |
string | 推荐 | 当前文档 ID，用于协同房间 |
offlineMode |
boolean | 否 | 离线模式，数据存 localStorage |
baseApiUrl |
string | 在线时 | 后端 API 基础路径 |
onSave |
function | 否 | 保存回调函数 |
onChange |
function | 否 | 内容变化回调 |
uploadAPI |
function | 否 | 文件上传函数，返回文件 URL |