JitWord协同AI文档 v3.0.0

A full-featured collaborative document editor that embeds into any web page via a single CDN script. Built on JitWord Engine, it supports real-time multi-user editing, document import/export, AI writing assistance, and a rich block-based editing experience.

Installation

CDN (Recommended)

Load the required scripts in order. The CDN build externalizes Vue, Arco Design, and heavy IO libraries for a smaller initial payload.

<!-- 1. Vue 3 -->
<script src="../cdn/vue.global.prod.js"></script>

<!-- 2. Arco Design Vue -->
<link rel="stylesheet" href="../cdn/arco.css">
<script src="../cdn/arco-vue.min.js"></script>
<script src="../cdn/arco-vue-icon.min.js"></script>

<!-- 3. Editor CSS + JS -->
<link rel="stylesheet" href="../dist/cdn/jit-word.css">
<script src="../dist/cdn/jit-word.cdn.js"></script>

CDN Files

Quick Start

Basic editor (no collaboration)

<!-- Mount target -->
<div id="app" style="height: 100vh;"></div>

<script>
const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',            // element id or HTMLElement
  locale: 'zh',          // 'zh' | 'en'
  editable: true,
})
</script>

With real-time collaboration

<script>
const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',
  currentDocumentId: 'doc-001',
  user: { id: 'u-001', name: 'Alice', color: '#3b82f6' },
  locale: 'zh',
})
.use(JitWord.Collab({
  wsServer: 'wss://your-domain.com/ws',
  currentDocumentId: 'doc-001',
  user: { id: 'u-001', name: 'Alice', color: '#3b82f6' },
}))
</script>

Full example with callbacks

const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',
  locale: 'zh',
  currentDocumentId: 'doc-001',
  user: { id: 'u-001', name: 'Alice', color: '#4f46e5' },
  editable: true,
  documentTitle: 'My Document',

  onLoadDocument: async ({ documentId }) => {
    const doc = await myApi.getDocument(documentId)
    return doc?.content ? { content: doc.content } : null
  },
  onSaveDocument: async ({ content, documentId }) => {
    await myApi.saveDocument(documentId, content)
  },
  onUpload: async (file) => {
    const url = await myApi.uploadFile(file)
    return url  // must return public URL string
  },
  onChange: (content) => {
    console.log('content changed', content)
  },
})

// Read content
const json = editor.getJSON()

// Set content
editor.setContent(json)

// Cleanup
editor.destroy()

Plugin System

JitWord v2 引入了企业级插件架构。无需加载一个庞大的完整包，只需加载最小化的 core，并根据部署需求添加所需插件。这非常适合政府/OA 集成、自定义授权层级以及对包体积敏感的 CI 环境。

Why plugins?

• Pay-per-feature — government clients may want document editing but no AI.
• Smaller bundles — embed a ~2 MB core instead of a 6.8 MB full bundle.
• Independent versioning — ship Collab v2 while keeping Export v1.
• Custom licensing tiers — each plugin can carry its own license check.

MODE 1 — Legacy all-in-one (backward compatible)

<!-- Single script, zero config changes needed -->
<script src="cdn/jit-word.full.js"></script>

const editor = new JitWord.JitWord({
  hold: 'app',
  wsServer: 'wss://word.jitword.com/ws',
  currentDocumentId: 'doc-001',
})

MODE 2 — Enterprise plugin-based

<!-- Load core (always required) -->
<script src="cdn/jit-word.core.js"></script>
<!-- Load only the plugins you need -->
<script src="cdn/jit-word.collab.js"></script>   <!-- optional -->
<script src="cdn/jit-word.export.js"></script>   <!-- optional -->
<script src="cdn/jit-word.ai.js"></script>      <!-- optional -->

const { JitWord } = window.JitWord

// ── Plugin callback configuration (one place for all backend wiring) ──
const plugins = {
  export:       {},
  pageSettings: {},
  watermark:    {},
  versions: {
    enableUI:        true,
    onLoadVersions:  (docId, page, limit) => myApi.getVersions(docId, page, limit),
    onCreateVersion: (data)               => myApi.createVersion(data),
    onGetVersion:    (docId, versionId)   => myApi.getVersion(docId, versionId),
    onUpdateVersion: (payload)            => myApi.updateVersion(payload),
    onDeleteVersion: (docId, versionId)   => myApi.deleteVersion(docId, versionId),
  },
  comment: {
    enabled:         canComment,
    onLoadComments:  (docId) => myApi.getComments(docId),
    onCreateComment: (data)  => myApi.createComment(data),
    onUpdateComment: (id, data) => myApi.updateComment(id, data),
    onDeleteComment: (id)    => myApi.deleteComment(id),
  },
  mention: {
    onSearch: async (keyword) => myApi.searchUsers(keyword),
    onSelect: (user) => console.log('Mentioned:', user),
  },
  share:   { enableUI: true, showQRCode: true },
  review:  { enabled: false },
  zoom:    { initialZoom: 100, showControls: true },
  collab:  {
    wsServer:          'wss://your-domain.com/ws',
    currentDocumentId: 'doc-001',
    user:              { id: 'u-001', name: 'Alice', color: '#3b82f6' },
    enableCursor:      true,
  },
}

// ── Register all plugins in one shot ──────────────────────────────────
const editor = new JitWord({ hold: 'app', currentDocumentId: 'doc-001' })
  .use(JitWord.Export(plugins.export))
  .use(JitWord.PageSettings(plugins.pageSettings))
  .use(JitWord.Watermark(plugins.watermark))
  .use(JitWord.Versions(plugins.versions))
  .use(JitWord.Comment(plugins.comment))
  .use(JitWord.Mention(plugins.mention))
  .use(JitWord.Share(plugins.share))
  .use(JitWord.Review(plugins.review))
  .use(JitWord.Zoom(plugins.zoom))
  .use(JitWord.Collab(plugins.collab))

Collab Plugin Plugin

Adds Yjs real-time collaboration powered by y-websocket. Injects the Collaboration and CollaborationCursor JitWord extensions before the editor mounts.

const editor = new JitWord({ hold: 'app' })
  .use(JitWord.Collab({
    wsServer: 'wss://word.jitword.com/ws',
    currentDocumentId: 'doc-001',
    user: { name: 'Alice', color: '#3b82f6' },
  }))

Export Plugin Plugin

Adds document import/export capabilities: DOCX, PDF, Markdown, HTML, and JSON. IO libraries are loaded via dynamic import — they are not bundled into the core.

// Programmatic import after plugin is loaded
const result = await editor.importFile('docx', file, { mode: 'replace' })

// Export is available via built-in toolbar or:
await editor.exportFile('pdf')

AI Plugin Plugin

Enables AI writing assistance. Patches the editor config with AI feature flags and exposes editor.ai.* API wrappers.

const editor = new JitWord({ hold: 'app' })
  .use(JitWord.AI({
    baseUrl: '/api/v1',
    enableAI: true,
    enableAISettings: true,
    aiSettingsConfig: {
      provider: 'deepseek',
      model: 'deepseek-chat',
      apiKey: 'sk-...',
    },
  }))

// AI API wrappers (available after plugin installed)
await editor.ai.stream({ prompt: 'Summarize the document' })
const stats = await editor.ai.trialStats()

Comment Plugin Plugin

Adds programmatic comment management (create, list, resolve, update, delete) and wires the built-in comment panel UI via commentsConfig patches. Custom handlers let you replace every SDK call with your own backend.

Exposes editor.comment.* after installation.

Programmatic API (editor.comment)

const editor = new JitWord({ hold: 'app', currentDocumentId: 'doc-001' })
  .use(JitWord.Comment({
    onLoadComments:  (docId) => myApi.getComments(docId),
    onCreateComment: (data)  => myApi.createComment(data),
    onDeleteComment: (id, docId) => myApi.deleteComment(id),
  }))

// After mount:
await editor.comment.add('Please review this paragraph', 'selected text')
const list = await editor.comment.list()
editor.comment.openPanel()

Versions Plugin Plugin

Adds version history management with optional auto-save. The built-in VersionManager UI is enabled; custom backend handlers can override every SDK call. Exposes editor.versions.*.

Programmatic API (editor.versions)

const editor = new JitWord({ hold: 'app' })
  .use(JitWord.Versions({
    enableUI: true,
    autoSaveInterval: 60000,  // auto-save every 60 s
    autoSaveTitle: 'Auto',
  }))

await editor.versions.create('Before major edit')
await editor.versions.restore('ver-xyz')
editor.versions.openPanel()

Watermark Plugin Plugin

Adds a tiled watermark overlay driven by pageSettings.watermark. The watermark is also included in PDF/DOCX exports. Exposes editor.watermark.*.

Programmatic API (editor.watermark)

.use(JitWord.Watermark({ text: 'CONFIDENTIAL', opacity: 0.15 }))

// Runtime updates:
editor.watermark.update({ text: 'DRAFT' })
editor.watermark.remove()
editor.watermark.set({ text: 'INTERNAL', color: '#ef4444', angle: -45 })

PageSettings Plugin Plugin

Adds programmatic page layout control (paper size, margins, orientation, line spacing). The built-in PageSettings modal is wired via config patches; custom load/save handlers support any backend. Exposes editor.pageSettings.*.

PageSettingsConfig fields

Programmatic API (editor.pageSettings)

.use(JitWord.PageSettings({
  initialSettings: { paperSize: 'A4', orientation: 'portrait' },
  onUpdatePageSettings: (docId, s) => myApi.savePageSettings(docId, s),
}))

// Switch to A3 landscape at runtime:
await editor.pageSettings.apply({ paperSize: 'A3', orientation: 'landscape' })
editor.pageSettings.openPanel()

Mention Plugin Plugin

Adds @mention support by wiring the JitWord Mention extension (already bundled in collabBase: 'notion') with a user-list provider. Exposes editor.mention.*.

MentionUser shape

Programmatic API (editor.mention)

.use(JitWord.Mention({
  users: [
    { id: 'u1', label: 'Alice', avatar: 'https://i.pravatar.cc/32?u=1' },
    { id: 'u2', label: 'Bob' },
  ],
  // Or use async lookup:
  onSearch: async (keyword) => {
    const res = await fetch(`/api/users?q=` + keyword)
    return res.json()
  },
  onSelect: (user) => console.log('Mentioned:', user),
}))

editor.mention.insert('Alice', 'u1')

Share Plugin Plugin

Adds document sharing and permission management. The built-in ShareDocumentDialog is wired via config patches; custom URL generators or permission handlers support white-label deployments. Exposes editor.share.*.

Programmatic API (editor.share)

.use(JitWord.Share({
  enableUI: true,
  showQRCode: true,
  getShareUrl:    () => `https://myapp.com/docs/` + docId,
  getReadOnlyUrl: () => `https://myapp.com/docs/` + docId + '?mode=read',
  onSetPermission: (docId, perm) => myApi.setPermission(docId, perm),
}))

editor.share.open()
await editor.share.setPermission('read')
await editor.share.copyUrl('read')

Review Plugin Plugin

Adds track-changes / review mode for document audit workflows (government, enterprise, legal). When active, every edit is wrapped as a tracked change that can be accepted or rejected individually or in bulk. Exposes editor.review.*.

Programmatic API (editor.review)

.use(JitWord.Review({
  enabled: false,
  author: { name: 'Alice', color: '#f87171' },
  onChange: (active) => console.log('Review:', active ? 'ON' : 'OFF'),
}))

editor.review.enable()
editor.review.acceptAll()
console.log(editor.review.isActive())  // false after acceptAll

Zoom Plugin Plugin

Adds programmatic zoom and view-mode control (Web view / Word page view). The built-in ZoomControls UI can be shown or hidden; integrators can render their own controls using the API. Exposes editor.zoom.*.

Programmatic API (editor.zoom)

.use(JitWord.Zoom({
  initialZoom: 100, showControls: true,
  onZoomChange: (lvl) => console.log('zoom:', lvl + '%'),
  onViewChange: (view) => console.log('view:', view),
}))

editor.zoom.set(150)
editor.zoom.in(10)
editor.zoom.setView('word')
console.log(editor.zoom.get())   // 160
editor.zoom.reset()

Constructor

Creates and mounts the editor into the specified container element. For collaboration mode, initialization is asynchronous — the editor waits for Yjs sync before rendering.

Config Options

Core

Collaboration

UI Visibility

AI Configuration (aiConfig)

Pass an aiConfig object to pre-configure the AI provider. All fields are optional — users can also configure these via the built-in AI Settings drawer.

const editor = new JitWord.JitWord({
  hold: 'app',
  enableAI: true,
  enableAISettings: true,
  aiConfig: {
    provider: 'deepseek',
    model: 'deepseek-chat',
    apiKey: 'sk-...',
    temperature: 0.7
  }
})

Version Config (versionConfig)

Override the built-in version CRUD handlers. When not provided, versions are managed automatically via baseApiUrl.

Callbacks

Document List Config (docsConfig)

Wire the built-in "文件" (File) button document list panel to your backend. Requires enableDocumentList: true.

Content API

getJSON() method

Returns the current document as a JitWord/ProseMirror JSON object.

getHTML() method

Returns the current document as an HTML string.

setContent(data, emitUpdate?) method

Replace the entire document content. data can be a JSON object (from getJSON()) or an HTML string.

setData(data) method

Alias for setContent().

setEditable(editable) method

Toggle the editor between editable and read-only mode at runtime.

getEditor() method

Returns the raw JitWord Editor instance for advanced low-level access.

setCurrentDocumentId(documentId) method

Switch to a different document without re-creating the editor. In collaboration mode, tears down the old Yjs provider, creates a new one for doc-{documentId}, and waits for sync before remounting.

// Switch document in a multi-document app
editor.setCurrentDocumentId('doc-002')

Element API

Programmatically manage document blocks. Every block has a stable id attribute.

insert(index?, element) method

// Append a heading
editor.insert({ type: 'heading', data: { level: 1, text: 'Hello World' } })

// Insert a paragraph at position 2
editor.insert(2, { type: 'paragraph', data: { text: 'Inserted text' } })

// Insert an image
editor.insert({ type: 'image', data: { src: 'https://example.com/img.png', alt: 'photo' } })

getElementById(id) method

Find a block by its ID.

updateElement(id, patch) method

editor.updateElement('abc123', { data: { text: 'Updated text' } })

deleteElementById(id) method

Delete a block by ID.

Import / Export

importFile(type, file, options?) method

const input = document.createElement('input')
input.type = 'file'
input.accept = '.docx'
input.onchange = async (e) => {
  const file = e.target.files[0]
  const result = await editor.importFile('docx', file, { mode: 'replace' })
  console.log(result.success, result.warnings)
}
input.click()

Export (programmatic)

Export buttons are built into the editor toolbar (PDF, Word, Markdown, HTML). For programmatic export use editor.exportFile():

// Trigger download directly
await editor.exportFile('docx', { filename: 'my-doc.docx' })
await editor.exportFile('md',   { filename: 'my-doc.md' })

// Get PDF as Blob (no auto-download):
const blob = await editor.exportFile('pdf', { autoDownload: false, filename: 'my-doc.pdf' })
console.log(blob.size, 'bytes')

Lifecycle

destroy() method

Tear down the editor completely: disconnects Yjs WebSocket, destroys Y.Doc, destroys JitWord editor, and unmounts the Vue app. Always call this before removing the container from the DOM.

// In a SPA router hook
onBeforeUnmount(() => {
  editor.destroy()
})

Collaboration

Real-time collaboration is powered by Yjs + y-websocket. Each document maps to a Yjs room named doc-{documentId}.

const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',
  currentDocumentId: 'doc-001',
  user: { id: 'u-001', name: 'Bob', color: '#059669' },
  // Auto-disconnects on destroy()
})
.use(JitWord.Collab({
  wsServer: 'wss://your-domain.com/ws',
  currentDocumentId: 'doc-001',
  user: { id: 'u-001', name: 'Bob', color: '#059669' },
  enableCursor: true,
}))

The collaboration WebSocket endpoint is provided by the backend server. The default backend uses the /ws path. Multiple users connecting with the same currentDocumentId will automatically share the same document.

Switching documents at runtime

// Switch to a different document — rebuilds Yjs connection
editor.setCurrentDocumentId('doc-002')

Version & History API

When enableVersions: true and baseApiUrl is set, version history is fully managed automatically. You can also call the backend REST API directly via JitWord.JitWordSDK.

REST API (via JitWordSDK.versions)

const { JitWordSDK } = window.JitWord

// Initialize once with your backend base URL
JitWordSDK.init({ baseUrl: 'https://your-domain.com/api/v1' })

// List versions (paginated)
const { versions, total } = await JitWordSDK.versions.getVersions('doc-001', 1, 20)

// Create a manual checkpoint
await JitWordSDK.versions.createVersion('doc-001', {
  content: editor.getJSON(),
  title: 'Before major edit',
  isAutoSave: false
})

// Get a single version for preview
const ver = await JitWordSDK.versions.getVersion('doc-001', 'ver-xyz')

// Restore by pushing the old content back
editor.setContent(ver.data.content)

// Rename a version
await JitWordSDK.versions.updateVersion('doc-001', 'ver-xyz', { title: 'Renamed' })

// Delete a version
await JitWordSDK.versions.deleteVersion('doc-001', 'ver-xyz')

// Compare two versions (returns diff)
const diff = await JitWordSDK.versions.compareVersions('doc-001', 'ver-a', 'ver-b')

Custom version handlers (versionConfig)

For custom backends, pass versionConfig to the constructor (see Config Options). The built-in UI will call your handlers instead of the default REST SDK.

File Upload

Provide an onUpload callback to handle image/attachment uploads. The function receives a File and must return a Promise resolving to the public URL.

const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',
  onUpload: async (file) => {
    const form = new FormData()
    form.append('file', file)
    const res = await fetch('/api/upload', { method: 'POST', body: form })
    const { url } = await res.json()
    return url  // must return the public URL string
  }
})

Events / Callbacks

i18n

Pass locale: 'zh' or locale: 'en' in the constructor. The language is applied at initialization and cannot be changed at runtime without recreating the instance.

const { JitWord } = window.JitWord
const editor = new JitWord({
  hold: 'app',
  locale: 'en',  // English UI
})

Element Types

Used with the Element API. Each type corresponds to a document block.

Build Formats