# 视图与渲染

理解内容和显示的关系，选择 DOM、HTML、Canvas 或 SVG 四种视图。

同一份文档可以由不同视图显示。Core 管理内容和命令，View 把内容显示出来，并把输入、点击和拖选转回文档操作。

## 从哪一种开始

| 视图 | 适合的起点 | 接入方式 |
| --- | --- | --- |
| 原生 DOM | 先接入可编辑文字，复用浏览器输入和 DOM NodeView | `DomViewExtension`，`mode: 'dom'` |
| Canvas | 自绘文字、选区和分页工作区 | `canvasViewExtension()`，`mode: 'canvas'` |
| SVG | 根据相同排版结果显示矢量内容 | `svgViewExtension()`，`mode: 'svg'` |
| retained HTML | 使用 QuireKit 管理输入和选区的连续流显示 | `htmlViewExtension()`，`mode: 'html'` |

原生 DOM 来自 `@quirekit/dom-view`，retained HTML 来自 `@quirekit/view-html`，Canvas 与 SVG 来自 `@quirekit/view`。两种 HTML 形式有不同的输入和几何处理，不应混用它们的配置。

第一次接入可从[快速开始](/guide/quick-start)使用 DOM；要自己做 Canvas/SVG 工作区，继续[挂载教程](/build/view)。想直接使用带标尺和功能区的产品，可以接入 [Classic](/classic/quick-start)。

## 切换显示不会转换文档模型

创建时注册所需视图，再通过 `changeMode()` 切换主视图。内容、选区和历史仍由同一个 Core 实例管理。普通文章不会因为切换到 Canvas 就成为 Word 文档，Word 的结构与排版规则仍需安装对应扩展。

## 自定义内容需要对应的显示实现

段落和常见格式由现有能力支持。自定义 Node 除了结构，还要提供所选视图需要的呈现能力；`renderHTML()` 并不能自动让 Canvas 知道怎样排列子内容。

[提示组教程](/build/extension)解释了这一步。各视图包的许可独立于 Core，见[支持与许可](/support)。