快速开始

这一页创建一个能输入文字的编辑器，使用 Core、常用内容扩展和浏览器原生 DOM 视图。Vue 项目可以直接跟随单组件教程。

安装基础能力

pnpm add @quirekit/core@alpha @quirekit/starter-kit@alpha @quirekit/dom-view@alpha @quirekit/pm-view@alpha

这些基础包均为 MIT，使用同一发布批次。Core 提供实例与命令；StarterKit 提供段落、标题和常用格式；DOM 视图接收浏览器输入，PM 基础样式处理空白与选区显示。

创建编辑器

页面中准备一个 id="editor" 的元素，在它出现后创建实例：

import { Editor } from '@quirekit/core'
import { StarterKit } from '@quirekit/starter-kit'
import { DomViewExtension } from '@quirekit/dom-view'
import '@quirekit/pm-view/style/prosemirror.css'

const editor = new Editor({
  element: document.getElementById('editor'),
  mode: 'dom',
  extensions: [StarterKit, DomViewExtension],
  content: '<p>Hello, QuireKit.</p>',
})

element 决定放在哪里，extensions 决定支持什么内容与行为，content 提供初始正文。现在点击文字就能输入，也可以用快捷键加粗和撤销。

试用按钮与内容

下面在同一个编辑器上增加了加粗、撤销与下载按钮。选中文字，点击加粗，再撤销。下载 JSON 可以看到实际修改后的文档结构。

这里的 core/editor.vue 放按钮，core/create.ts 创建实例，core/shortcuts.ts 演示扩展快捷键，shared/download.ts 负责下载。源码文件选择器可按需查阅；带控件的示例另需 UI 主题与样式配置。

离开页面时释放

editor.destroy()

不要在创建后立刻销毁；在组件卸载或结束使用时调用。示例里的编辑只保留在当前会话，自己的产品需要另外接入保存与恢复。

接下来可以读 Vue 接入、文档与 Schema，或沿构建自己的编辑器加入 Canvas 和产品界面。