# @drenso-toast-ui/editor 中文文档

规范地址：https://npmcn.com/package/%40drenso-toast-ui/editor/

版本：3\.4\.1
npm 元数据更新时间：2026-03-13T04:08:15.802Z
中文译文更新时间：2026-11-12T19:50:10.703Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40drenso-toast-ui/editor
原文对照：https://npmcn.com/package/%40drenso-toast-ui/editor/?lang=original
项目主页：https://ui.toast.com/
源码仓库：https://github.com/Drenso/tui.editor

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

- 包体积（解压后）：3.2 MB，69 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- 首次发布：2026-03-12T14:09:32.920Z
- 最新版本发布：2026-03-12T17:49:04.597Z
- 近 30 天下载量：7007（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

GFM Markdown Wysiwyg 编辑器 - 生产性和广泛性

## 安装

```sh
npm install @drenso-toast-ui/editor
```

也可以使用：`pnpm add @drenso-toast-ui/editor`、`yarn add @drenso-toast-ui/editor`、`bun add @drenso-toast-ui/editor`

## README

# ![TOAST UI Editor](https://uicdn.toast.com/toastui/img/tui-editor-bi.png)

[![npm](https://img.shields.io/npm/v/@drenso-toast-ui/editor.svg)](https://www.npmjs.com/package/@drenso-toast-ui/editor)

## 目录

-   [收集关于使用开源的统计数据](https://npmcn.com/package/%40drenso-toast-ui/editor/#readme-Collect-statistics-on-the-use-of-open-source)
-   [文档](https://npmcn.com/package/%40drenso-toast-ui/editor/#readme--documents)
-   [安装](https://npmcn.com/package/%40drenso-toast-ui/editor/#readme--install)
-   [使用量](https://npmcn.com/package/%40drenso-toast-ui/editor/#readme--usage)
-   [教学](https://npmcn.com/package/%40drenso-toast-ui/editor/#readme--tutorials)

## 收集关于使用开源的统计数据

TOAST UI产品应用Google Analytics(GA)收集开源使用的统计数据,以识别TOAST UI编辑器在全世界的使用范围. 它还是确定项目未来方向的重要指数. `location.hostname` (如:ui.toast.com) 被收集,唯一的目的只是衡量使用量的统计数据.

要禁用 GA, 请使用以下 `usageStatistics` 选项.

```js
const options = {
  // ...
  usageStatistics: false
};

const editor = new Editor(options);
```

## 页:1

-   [开始](https://github.com/Drenso/tui.editor/blob/master/docs/en/getting-started.md)
-   [APIs 密码](https://nhn.github.io/tui.editor/latest/)
-   v3.0 迁移指南
    -   [联合国](https://github.com/Drenso/tui.editor/blob/master/docs/v3.0-migration-guide.md)
    -   [한국어](https://github.com/Drenso/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md)

您也可以在网页上看到 API 的旧版本 [页 次](https://github.com/Drenso/tui.editor/releases)。 。 。 .

## QQ 安装

TOAST UI产品可以通过使用包管理器或直接下载源来使用. 然而,我们强烈建议使用包管理器.

### Via 软件包管理器

TOAST UI产品在两个软件包管理器中注册, [无](https://www.npmjs.com/)。您可以通过软件包管理器提供的命令方便地安装它。 使用 npm 时, 一定要在环境中使用 [节点.js](https://nodejs.org/en/) 已安装.

#### 无

```sh
$ npm install --save @drenso-toast-ui/editor # Latest Version
$ npm install --save @drenso-toast-ui/editor@<version> # Specific Version
```

### Via 内容交付网络

TOAST UI 产品通过 CDN 提供 [国家网云](https://www.toast.com/)。 。 。 .

您可以使用CDN如下.

```html
...
<body>
  ...
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
...
```

如果您想要使用特定版本, 请使用标签名代替 `latest` 在url的路径.

CDN目录的结构如下:

```
- uicdn.toast.com/
   ├─ editor/
   │     ├─ latest/
   │     │    ├─ toastui-editor-all.js
   │     │    ├─ toastui-editor-all.min.js
   │     │    ├─ toastui-editor-viewer.js
   │     │    ├─ toastui-editor-viewer.min.js
   │     │    ├─ toastui-editor.css
   │     │    ├─ toastui-editor.min.css
   │     │    ├─ toastui-editor-viewer.css
   │     │    ├─ toastui-editor-viewer.min.css
   │     │    ├─ toastui-editor-only.css
   │     │    ├─ toastui-editor-only.min.css
   │     │    └─ theme/
   │     │         ├─ toastui-editor-dark.css
   │     │         └─ toastui-editor-dark.min.css
   │     │    └─ i18n/
   │     │         └─ ...
   │     ├─ 2.0.0/
   │     │    └─ ...
```

## 使用量

首先,您需要添加创建 TOAST UI 编辑器的容器元素(以下简称"编辑器") .

```html
...
<body>
  <div id="editor"></div>
</body>
...
```

编辑器可以通过创建带有构建器函数的实例来使用. 要获得构造器函数,您应该根据环境使用以下一种方式导入模块 .

### 在节点环境中使用模块格式

-   ES6模块

```javascript
import Editor from '@drenso-toast-ui/editor';
```

-   常见JS

```javascript
const Editor = require('@drenso-toast-ui/editor');
```

### 在浏览器环境中使用命名空间

```javascript
const Editor = toastui.Editor;
```

然后,您需要添加编辑器所需的 CSS 文件 。 在节点环境中导入 CSS 文件,并在使用 CDN 时添加到 html 文件.

### 在节点环境中使用

```javascript
import '@drenso-toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
```

### 在浏览器环境中使用 CDN

```html
...
<head>
  ...
  <!-- Editor's Style -->
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
...
```

最后,您可以创建带有选项的实例,并在创建实例后调用各种 API .

```javascript
const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown',
  previewStyle: 'vertical'
});

editor.getMarkdown();
```

### 默认选项

-   `height`: 字符串或自动前高度) `300px` | `auto`
-   `initialEditType`: 要显示的初始类型 `markdown` | `wysiwyg`
-   `initialValue`: 初始值. 设置下划线字符串
-   `previewStyle`: Markdown 模式的预览样式 `tab` | `vertical`
-   `usageStatistics`:让我们知道 _主机名_。我们要向您学习您如何使用编辑器。 你可以随意禁用它. `true` | `false`

找到更多选项 [这里](https://nhn.github.io/tui.editor/latest/ToastUIEditor)。 。 。 .

## 辅导

-   [查看器](https://github.com/Drenso/tui.editor/blob/master/docs/en/viewer.md)
-   [插件](https://github.com/Drenso/tui.editor/blob/master/docs/en/plugin.md)
-   [国际化(i18n)](https://github.com/Drenso/tui.editor/blob/master/docs/en/i18n.md)

## 常见问题

### @drenso-toast-ui/editor 是什么？

GFM Markdown Wysiwyg 编辑器 - 生产性和广泛性

### 如何安装 @drenso-toast-ui/editor？

在项目目录运行 npm install @drenso-toast-ui/editor，或使用 pnpm add / yarn add / bun add。

### @drenso-toast-ui/editor 支持 TypeScript 吗？

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

### @drenso-toast-ui/editor 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @drenso-toast-ui/editor 可以商用吗？

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

### @drenso-toast-ui/editor 的下载量有多少？

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

### @drenso-toast-ui/editor 还在维护吗？

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