# @domternal/vue 中文文档

规范地址：https://npmcn.com/package/%40domternal/vue/

版本：1\.8\.1
npm 元数据更新时间：2026-11-08T11:28:57.075Z
中文译文更新时间：2026-11-13T02:00:03.517Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40domternal/vue
原文对照：https://npmcn.com/package/%40domternal/vue/?lang=original
项目主页：https://domternal.dev/
源码仓库：https://github.com/domternal/domternal

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：393 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：vue \>=3\.3，@domternal/core \>=1\.8\.0 \<2\.0\.0
- 首次发布：2026-04-15T21:56:17.510Z
- 最新版本发布：2026-11-08T11:28:56.941Z
- 近 30 天下载量：2446（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：37（近 12 个月 37 个）

## 中文简介

用于 Domternal 丰富文本编辑器的 MIT 许可 Vue 3 组件

## 安装

```sh
npm install @domternal/vue
```

也可以使用：`pnpm add @domternal/vue`、`yarn add @domternal/vue`、`bun add @domternal/vue`

## README

# @ domternal/ veue (主演)

[![Version](https://img.shields.io/npm/v/@domternal/vue.svg)](https://www.npmjs.com/package/@domternal/vue) [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)

3 个组件和可堆肥 [永远](https://domternal.dev/) 有钱 文本编辑器。 包括工具栏和菜单组件, `v-model` 支持,反应 编辑器状态,以及自定义节点视图被写成 Vue 组件 .

## 安装

```bash
pnpm add @domternal/vue @domternal/core @domternal/theme vue
```

软件包宣布Node.js 22或后作工具. 要求第3.3节或以后 `@domternal/core >=1.8.0 <2.0.0`。 。 。 . 对所有已安装的Domternal Free包使用1.8.1版本. 导入主题一次 您的默认样式申请.

## 快开始

使用可编译组件来安排工具栏、内容和菜单 :

```vue
<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { StarterKit, BubbleMenu } from '@domternal/core';
import '@domternal/theme';

const extensions = [StarterKit, BubbleMenu];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Hello from Vue!</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
    <Domternal.BubbleMenu :contexts="{ text: ['bold', 'italic', 'underline'] }" />
  </Domternal>
</template>
```

`Domternal` 创建编辑器,提供给后代,并摧毁它 卸载。 工具栏使控件由已装入的扩展贡献 .

## 用 v- 型号绑定内容

使用 `DomternalEditor` 当文件对申请具有约束力时:

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { DomternalEditor } from '@domternal/vue';
import { StarterKit, type Content } from '@domternal/core';

const extensions = [StarterKit];
const content = ref<Content>('<p>Start typing...</p>');
</script>

<template>
  <DomternalEditor v-model="content" :extensions="extensions" />
</template>
```

该模型默认持有HTML. 设定 `outputFormat="json"` 并初始化为 JSON满足于捆绑JSON.

为了完全控制, `useEditor` 返回时 `editor`页:1 `ShallowRef<Editor | null>`,以及 `editorRef`,将它绑在挂载元素上。 使用 `provideEditor(editor)` 改为 分享它,并 `useEditorState(editor, ed => ed.isActive('bold'))` 用于衍生状态. 见 [可比较示例](https://domternal.dev/v1/guides/vue/#composable-hook-pattern-full-control)。 。 。 .

## 配置说明

-   包装包括 `Document`, (中文(简体) ), `Paragraph`, (中文(简体) ), `Text`, (中文(简体) ), `BaseKeymap`,以及 `History`。 。 。 . `StarterKit` 增加通用格式.
-   `Domternal` 财务报告和审定财务报表 `DomternalEditor` 对 **没有** 转发a `history` 道具 (英语). 用于 另一个撤消管理器, 呼叫 `useEditor({ history: false, extensions })` 并省略 历史也来自这些扩展。 见 [瘫痪历史](https://domternal.dev/v1/extensions/history/#disabling-the-built-in-history)。 。 。 .
-   创建发生在 `onMounted`,所以编辑是 `null` 安全部门改革期间和初始阶段 设置。 离开 `immediatelyRender` 关闭用于 SSR; 参见 [纳克思融合](https://domternal.dev/v1/guides/vue/#ssr-nuxt)。 。 。 .
-   `editable` 控制只读模式. `preset="notion"` 在创建时读取. 替换 `i18n` 在不创建编辑器的情况下更新 UI 翻译.
-   `onContentError` 报告无效的初始内容; `onContentDiagnostic` 报告 正常内容值 。 这个 [向导](https://domternal.dev/v1/guides/vue/#options) 文档召回选项 [编辑器 API](https://domternal.dev/v1/guides/editor-api/#content-diagnostics) 解释诊断.
-   自定义 `icons` 包含原始的 SVG。 供应可信,开发者授权的常数.

## 办公室粘贴和自定义列表标签

登记册 [`PasteCleanup`](https://npmcn.com/package/%40domternal/extension-paste-cleanup/README.md) 在你的编辑 `extensions` 以规范支持的 Word 和 Google Docs 剪贴板 HTML 。 没错 无法由包装器启用 。 在1.5.0时, `formattingForPaste` 允许您的应用程序 选择每个粘贴的保存或适应,而不创建编辑器. 为您添加相应的格式化、 表格和图像扩展名 想要保留。 使用 [`ListLabels`](https://npmcn.com/package/%40domternal/core/README.md#optional-list-labels) 页:1 支持自定义标记,每个协作作者都有相同的计划.

## 进一步阅读

-   [Vue 指南和组件参考](https://domternal.dev/v1/guides/vue/)
-   [编辑器命令和内容 API](https://domternal.dev/v1/guides/editor-api/)
-   [他们](https://domternal.dev/v1/guides/theming/) 财务报告和审定财务报表 [本地化为 `i18n`](https://domternal.dev/v1/guides/i18n/#vue)
-   [可选剪贴板 HTML 清理](https://domternal.dev/v1/extensions/paste-cleanup/)
-   [自定义 Vue 节点视图](https://domternal.dev/v1/guides/vue/#custom-node-views)

## 常见问题

### @domternal/vue 是什么？

用于 Domternal 丰富文本编辑器的 MIT 许可 Vue 3 组件

### 如何安装 @domternal/vue？

在项目目录运行 npm install @domternal/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3）、@domternal/core（\>=1\.8\.0 \<2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @domternal/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @domternal/vue 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @domternal/vue 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @domternal/vue 可以商用吗？

@domternal/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @domternal/vue 的下载量有多少？

根据 npm 官方下载统计，@domternal/vue 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,446 次，日均约 82 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @domternal/vue 还在维护吗？

最新版本 1\.8\.1 发布于 2026/11/08（5 天前）；至今共发布 37 个版本，其中过去 12 个月发布了 37 个；首次发布于 2026/04/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。