# @edsdk/n1ed-react 中文文档

规范地址：https://npmcn.com/package/%40edsdk/n1ed-react/

版本：1\.0\.19
npm 元数据更新时间：2025-09-08T16:39:59.632Z
中文译文更新时间：2026-11-13T07:22:01.868Z
软件包许可：LGPL v3

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

原始 npm 页面：https://www.npmjs.com/package/%40edsdk/n1ed-react
原文对照：https://npmcn.com/package/%40edsdk/n1ed-react/?lang=original
项目主页：https://github.com/edsdk/n1ed-react#readme
源码仓库：https://github.com/edsdk/n1ed-react

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

- 包体积（解压后）：24.7 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2020-02-10T10:26:55.035Z
- 最新版本发布：2024-09-23T10:30:31.125Z
- 近 30 天下载量：181413062（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

N1ED 编辑器作为反应组件

## 安装

```sh
npm install @edsdk/n1ed-react
```

也可以使用：`pnpm add @edsdk/n1ed-react`、`yarn add @edsdk/n1ed-react`、`bun add @edsdk/n1ed-react`

## README

# 小型MCE + N1ED 反应组件

> 基于 TinyMCE 创建并编辑 HTML 内容, 使用强大的视觉页面构建器

**问题:** 还有什么比TinyMCE更好的?  
**问:** 最新的TinyMCE 6 + 一组免费部件,自定义模板,现代 UI, Flmngr 文件管理器, ImgPen 图像编辑器, Bootstrap 列编辑器, 和可视配置 : [国家1ED](https://n1ed.com/)。 。 。 .

![N1ED screenshot](https://n1ed.com/img/screenshots/docs/widgets/button/edit-button.png)

这个模块将帮助将 N1ED(捆绑了 TinyMCE + 全部需要的免费加载器使其动力) 整合到您的 React app中.

## 安装

与 [无](https://npmjs.com/) 安装、 运行

```
$ npm install --save @edsdk/n1ed-react
```

见满 [反应 + TinyMCE + N1ED 安装手册](https://n1ed.com/doc/install-n1ed-react-component) 为了更多.

## 使用量

以下是在您的 React 组件中使用 TinyMCE + N1ED 的例子 。 这是一个JS样本,见下文TypeScript和JavaScript GitHub样本项目的链接.

在这个例子中,我们使用添加N1ED和附加(这是可选的)定义自定义工具栏,并在工具栏内创建自定义的TinyMCE按钮,以显示如何使用N1ED的基本TinyMCE特性.

```js
import React from 'react';
import {N1ED} from '@edsdk/n1ed-react';


class YourReactComponent {

    handleEditorChange(content, editor) {
        console.log('Content was updated:', content);
    };
    
    render() {
        
        return <div>
            Edit the content:
            <N1ED
                apiKey="REACDFLT" // you will use your own key later
                initialValue="<p>N1ED react demo</p>"
                onEditorChange={this.handleEditorChange}

                init={{
                    height: 500,
                    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | myCustomToolbarButton',
                    setup: (editor) => {
                        // Just a sample of creating a custom button
                        // N1ED does not block this TinyMCE feature
                        // and also does not conflict with TinyMCE plugins
                        console.log("TinyMCE initialized");
                        editor.ui.registry.addButton('myCustomToolbarButton', {
                            text: 'My Custom Button',
                            onAction: () => alert('Custom button clicked!'),
                        });
                    },
                }}
            />
        </div>;
        
    }
    
}
```

**重要说明:**: 不要将小MCE作为 _控制_ 组件( 不尝试用一对 `initialValue`编号 :`onEditorChange`) (中文(简体) ). TinyMCE 只支持一次设置初始值, 然后使用 `onEditorChange` 调用。 React TinyMCE 执行是经典 _无控制_ 组件.

所有属性 `<N1ED>` 元素在正式表格中描述 [微量移动 反应文件](https://www.tiny.cloud/docs/integrations/react/)。 。 。 .

唯一的区别是:

-   `apiKey` 属性此处与 TinyMCE Cloud 无关, 而是与 N1ED 云有关, 在您需要视觉配置或添加一些之前是可选的 [其他加载](https://n1ed.com/plugins) 从N1ED生态系统.
    
-   您不需要定义 `plugins` 参数 `N1ED` 值:它已经定义,直到您指定了其他东西.
    

## 实例

我们有两个如何使用N1ED反应组件的例子:

-   [N1ED 反应实例( JavaScript)](https://github.com/edsdk/n1ed-react-example)
-   [N1ED 反应实例( TypeScript)](https://github.com/edsdk/n1ed-react-typescript-example)

## 技术细节

`@edsdk/n1ed-react` 用途 `@tinymce/tinymce-react` 模块内部和代表所有给 TinyMCE 的调用,除了它为初始化与动态 CDN 连接相关的正确环境所做的一些特别行动(这使得配置您的 N1ED+成为可能) 使用微小的 MCE 实例在线 [盘子](https://n1ed.com/)) (中文(简体) ).

## 类型脚本支持

这个模块用TypeScript来编写,可以同时用于JS和TS项目. 您不需要单独安装打字, 输入到工程中 .

## 许可证

此模块在 LGPL v3 下发布, 可以自由用于您的工程 。 N1ED本身也是免费产品.

## 常见问题

### @edsdk/n1ed-react 是什么？

N1ED 编辑器作为反应组件

### 如何安装 @edsdk/n1ed-react？

在项目目录运行 npm install @edsdk/n1ed-react，或使用 pnpm add / yarn add / bun add。

### @edsdk/n1ed-react 支持 TypeScript 吗？

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

### @edsdk/n1ed-react 支持 ESM 还是 CommonJS？

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

### @edsdk/n1ed-react 可以商用吗？

@edsdk/n1ed-react 使用 LGPL v3 许可。声明的许可为 LGPL v3，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @edsdk/n1ed-react 的下载量有多少？

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

### @edsdk/n1ed-react 还在维护吗？

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