# 选择编辑器与接入方式

区分共享文档能力、Classic 和 Block 产品适配，按支持状态选择预设与安装位置。

先确定产品，再选择插件。Classic 是分页编辑产品，Block 是 HTML 连续流产品；两者共用 Core 与部分文档能力，但产品控件、预设和挂载方式各有合同。

[插件目录](/plugins)与详情页共用左侧的编辑器切换，接入示例优先展示所选产品；也可在正文中临时切换作比较。旁边的筛选按钮提供能力分类与协议标签，协议可多选，不选表示不限。手机端在导航抽屉中操作；切换页面或语言保留条件，面板内“重置”恢复全部。

编辑器筛选保留“直接支持”和“需适配”的项目；“未支持”和“未验证”可在全部目录中查阅。总览与接入指南始终保留，筛选不会离开正在阅读的页面。

## 读懂适用性

每个参考页顶部列出两端状态与所需装配，卡片也显示相同状态。

| 状态 | 含义 | 接入时怎么做 |
| --- | --- | --- |
| 直接支持 | 已有对应产品装配 | 使用该页列出的预设或入口，继续满足控件开关、服务与资源条件 |
| 需适配 | 共享能力可复用，但需要明确的产品适配或宿主接线 | 沿该页的适配入口或配置合同接入，不能只复制底层 import |
| 未支持 | 该入口不符合产品当前合同 | 选择另一产品或已有适配；例如 Block 不消费 Classic 的 plugins |
| 未验证 | 尚无完整产品接入与验证路径 | 不把公开导出视为产品支持承诺，先验证模型、View、交互与文件链路 |

“直接支持”不等于全部功能默认开启，也不承诺所有导出格式完整往返。许可是另一维度：MIT、AGPL、商业标签继续来自包元数据；私有包需先取得相应分发。

## 三个层次，各有安装位置

| 层次 | 拥有什么 | 接入位置 |
| --- | --- | --- |
| 共享文档能力 | 节点、标记、命令、配置与宿主端口 | Core 的 `extensions`，或由产品预设安装 |
| Classic 产品适配 | 功能区、工具栏、面板、文件服务和产品生命周期 | 普通扩展放 `extensions`；产品插件放 `plugins`；产品预设放 `preset` |
| Block 产品适配 | 连续流呈现、块操作、工具栏与工作区接线 | `createBlockEditor` 的 `preset` 配置或 `extensions`，附加 Vue 控件通过产品插槽挂载 |

Classic 的 `preset` 是产品预设对象。Block 的 `preset` 是配置对象或 `false`；`createBlockEditorPreset()` 返回扩展数组，供独立 Core 使用。两者不能互换。

文档配置只维护一份。在同一参考页切换 Classic、Block 接入说明，随后阅读共用的配置与命令。预设已有的能力通过子项配置；确需替换时先关闭原子项，避免重复安装。

## 共享图形能力：选择产品装配

[Flowchart](/plugins/reference/flowchart)负责流程图源码、预览和宿主端口。Classic 使用 [ClassicFlowchart](/plugins/reference/classic-flowchart)接入工作区；Block 默认预设已经提供工作区和媒体交互，使用 `preset.flowchart` 配置或关闭。

以下片段的 `element` 是已有宿主元素。宿主负责尺寸、保存和资源；页面结束时调用 `instance.destroy()`。

### Classic

共享扩展只定义内容与宿主端口。使用下列 Classic 适配入口接入工作区和产品交互，不要同时安装共享扩展与其同名适配实现。

[ClassicFlowchart](/plugins/reference/classic-flowchart)

```ts
import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'
import { ClassicFlowchart } from '@quirekit/classic-flowchart'

const instance = createClassicEditor({
  element,
  extensions: [ClassicFlowchart],
})
```

### Block

createBlockEditor 默认预设已装配此能力。通过 preset 中对应子项配置；图形编辑使用预设注入的工作区，宿主仍负责保存和资源。不要重复安装同名扩展。

[createBlockEditorPreset](/plugins/reference/create-block-editor-preset)

```ts
import { createBlockEditor } from '@quirekit/block-editor'
import '@quirekit/block-editor/styles.css'

const instance = createBlockEditor({
  element,
  content: { type: 'doc', content: [{ type: 'paragraph' }] },
})
```

思维导图、白板、文本绘图与数据视图采用相同的共享能力/产品装配分层。已有适配不代表 DOCX、PDF 或其他格式自动保留全部编辑能力，以相应文件服务说明为准。

## 表格与编号：包名不能决定适用范围

`@quirekit/block-table` 复用 `@quirekit/classic-table` 的规范节点和命令，通过 table-only profile 接入连续流；`@quirekit/block-numbering` 复用 `@quirekit/classic-numbering` 的规范编号和命令。它们不安装 Classic 壳或分页。

- 表格：从 [WordTable](/plugins/reference/word-table)查阅共享语义；Block 接入使用 [createBlockTableExtensions](/plugins/reference/create-block-table-extensions)。
- 列表：从 [WordNumbering](/plugins/reference/word-numbering)查阅共享配置；Block 接入使用 [createBlockNumberingExtensions](/plugins/reference/create-block-numbering-extensions)。

表格扩展数组负责模型与命令。若使用 Vue 产品界面，另将表格控件挂入 `BlockEditor` 的 `tools` 插槽：

```vue
<script setup lang="ts">
import { BlockEditor } from '@quirekit/block-editor/vue'
import { BlockTableMenu } from '@quirekit/block-table/vue'
// instance 来自 createBlockEditor，extensions 已展开 createBlockTableExtensions()。
</script>

<template>
  <BlockEditor :instance="instance">
    <template #tools="{ editor, editable, viewport }">
      <BlockTableMenu :editor="editor" :editable="editable" :viewport="viewport" />
    </template>
  </BlockEditor>
</template>
```

Vue 组件管理 View 挂载，创建实例时省略 `element`；实例创建者仍负责销毁。表格菜单、编号图库与底层命令分别有自己的支持边界，不能把“底层模型可复用”理解为“全部产品交互已接入”。

继续[配置插件](/plugins/configuration)，或从[全部插件](/plugins)选择具体能力。