# @creaditor/newsletter-starterkit 中文文档

规范地址：https://npmcn.com/package/%40creaditor/newsletter-starterkit/

版本：1\.0\.76
npm 元数据更新时间：2026-11-08T03:40:48.625Z
中文译文更新时间：2026-11-10T23:40:51.142Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：17.3 MB，1199 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2025-11-04T20:45:06.085Z
- 最新版本发布：2026-11-08T03:40:48.446Z
- 近 30 天下载量：5008（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：83（近 12 个月 81 个）

## 中文简介

Creaditor 通讯编辑器 - Starterkit 用于创建美丽的电子邮件通讯

## 安装

```sh
npm install @creaditor/newsletter-starterkit
```

也可以使用：`pnpm add @creaditor/newsletter-starterkit`、`yarn add @creaditor/newsletter-starterkit`、`bun add @creaditor/newsletter-starterkit`

## README

# @creaditor/ newsletter- starterkit (英语)

> 一个强大的视觉编辑器 创建美丽的电子邮件通讯

一个拖放通讯编辑器 所有内置。 不需要外部依赖关系!

## \* 特性

-   🎨 **可视拖放( D)** - 建筑通讯的直观界面
-   📱 **响应设计** - 箱外易移动的电子邮件
-   🔧 **可自定义** - 全面控制样式和组件
-   🌍 **i18n 辅助** - 支持多种语言
-   💾 **自动保存** - 永远不要失去你的工作
-   📝 **丰富的文本编辑器** - 强大的文本编辑能力
-   🖼️ **媒体图片库** - 图像和媒体管理简便
-   🎯 **合并标记** - 将每个收件人的电子邮件个性化
-   ⚡ **自办** - 所有文件已捆绑,不需要CDN

## \* 安装

```bash
npm install @creaditor/newsletter-starterkit
```

或用纱线:

```bash
yarn add @creaditor/newsletter-starterkit
```

## QQ 快速启动

### 简单的 HTML 集成

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Newsletter Editor</title>
</head>
<body>
    <div id="root"></div>
    
    <!-- Load the editor bundle -->
    <script src="node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js"></script>
    
    <script>
        // Initialize the editor
        const editor = new cdtrStarter({
            target: document.getElementById('root'),
            width: '650px',
            language: 'en',
            onSave: (data) => {
                console.log('Newsletter saved:', data);
                // Send to your backend
            }
        });
    </script>
</body>
</html>
```

### 带有配置

```javascript
const editor = new cdtrStarter({
    target: document.getElementById('root'),
    width: '650px',
    language: 'en',
    
    // Document name
    documentName: 'My Newsletter',
    
    // User information
    user: {
        id: 'user123',
        email: 'user@example.com',
        name: 'John Doe',
        logo: 'https://example.com/logo.png'
    },
    
    // Initial components (optional)
    components: [],
    
    // Callbacks
    onSave: (data) => {
        console.log('Content saved:', data);
    },
    
    onChange: () => {
        console.log('Content changed');
    },
    
    onSendTestEmail: (email) => {
        console.log('Send test to:', email);
    }
});
```

## • API

### 构造选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `target` | HTML 元素 | 所需经费 | 挂载编辑器的 DOM 元素 |
| `width` | 字符串 | '650px' (英语) | 通讯的宽度 |
| `language` | 字符串 | '来' | 编辑语言(en, he等) |
| `languageJson` | 对象 | \- 说吧 | 自定义语言翻译 |
| `documentName` | 字符串 | \- 说吧 | 文件名称 |
| `components` | 数组 | \[ | 初期通讯部分 |
| `user` | 对象 | \- 说吧 | 用户信息(ID、电子邮件、名称、标志) |
| `onSave` | 函数 | \- 说吧 | 保存内容时调用 |
| `onChange` | 函数 | \- 说吧 | 内容更改时调用 |
| `onSendTestEmail` | 函数 | \- 说吧 | 请求测试电子邮件时调用 |
| `fonts` | 数组 | \- 说吧 | 可用字体 |
| `mergeTags` | 对象 | \- 说吧 | 合并个人化标签 |
| `plugins` | 数组 | \[ | 额外插件 |

### 方法

```javascript
// Get newsletter data as JSON
const data = await editor.commands.toJSON();
```

## 🎨自定义

### 自定义字体

```javascript
const editor = new cdtrStarter({
    target: document.getElementById('root'),
    fonts: [
        {
            id: 'Roboto',
            cssRule: 'Roboto, sans-serif',
            name: 'Roboto',
            url: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap'
        }
    ]
});
```

### 合并标签( 个人化 )

```javascript
const editor = new cdtrStarter({
    target: document.getElementById('root'),
    mergeTags: {
        items: [
            { value: 'name', label: 'First Name' },
            { value: 'email', label: 'Email' },
            { value: 'company', label: 'Company' }
        ],
        prefix: '{{',
        suffix: '}}',
        title: 'Personalization'
    }
});
```

## 国际化

支持的语言 :

-   英语( en)
-   希伯来语( 他)
-   自定义( 提供自己的语言Json)

```javascript
const editor = new cdtrStarter({
    target: document.getElementById('root'),
    language: 'he', // Hebrew
    // Or provide custom translations:
    languageJson: {
        "save": "Save",
        "cancel": "Cancel",
        // ... more translations
    }
});
```

## 软件包内容

```
@creaditor/newsletter-starterkit/
└── dist/
    ├── creaditor.bundle.js     (2.2MB - Main bundle)
    ├── index.html              (Demo page)
    └── [chunk files].js        (Lazy-loaded modules)
```

## QQ 浏览器支持

-   颜色( 最新)
-   火狐( 最新)
-   萨法里(最新)
-   边缘( 最新)

## 综合实例

### 与CDN( 如果自主办)

```html
<script src="https://your-cdn.com/creaditor.bundle.js"></script>
<script>
    const editor = new cdtrStarter({
        target: document.getElementById('root')
    });
</script>
```

### 用反应( 通过使用效果记录)

```jsx
import { useEffect, useRef } from 'react';

function NewsletterEditor() {
    const rootRef = useRef(null);
    
    useEffect(() => {
        // Load script
        const script = document.createElement('script');
        script.src = '/node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js';
        script.onload = () => {
            new window.cdtrStarter({
                target: rootRef.current,
                width: '100%',
                language: 'en'
            });
        };
        document.body.appendChild(script);
        
        return () => document.body.removeChild(script);
    }, []);
    
    return <div ref={rootRef} />;
}
```

## 更改日志

### 1.0.37-审查

**已合并更新 `1.0.37-preview.1`**

-   **链接编辑和拾取器修正 :**
    -   改进了文本编辑器中的链接插入和不链接行为,因此选择处理更加可靠,链接样式不会泄露到周围内容.
    -   插入后固定与链接相关的样式重排,并改进了URL处理行为.
-   **传输数据/共享工作流程:**
    -   将旧的进出口面板替换为侧边栏的新传输数据流.
    -   添加了用于生成和输入访问代码的UI,API版本支持,改进了模板加载反馈,以及新流的多语言字符串.
    -   清理了相关的状态处理、订阅和定时器,以提高稳定性.
-   **自定义项目增强 :**
    -   添加了自定义项目符号图标的支持,包括图标 URL 处理,默认图像,颜色和大小控制,以及侧边栏中的条件图标选项.
    -   改进弹出内容的间隔和样式支持.
-   **编辑器抛光 :**
    -   将取消/重做图标进行交换以匹配预期行为 .
    -   添加了更小的编辑器一致性修正,包括排序时的数据集任务,以及在创建新按钮时保存默认按钮文本.

### 1.0.37-审查

**链接拾取器 URL 输入**

-   **固定 :** 打入一个点( T)`.`)在URL字段中(例如. `sendmsg.co`)不再去除字符. 输入是从母体状态控制下来的,在点被应用之前,重新发送者正在覆盖该值.
-   **协议投入`@creaditor/linkpicker`:**
    -   `handleInput` 现在触发 `onChange` 对于任何字符,当光标位于尾端时,不仅有字母数字字符,所以点和其他URL安全字符都保留.
    -   删除了“ 最后一个字符必须是字母数字” 检查; 我们只跳过整个值为非缩写( 例如 ) 时 . `...` 或者说 `---`) (中文(简体) ).
-   **链接元素 :**
    -   `onKeyDown` 不再打电话 `onChangeLink(event)` 或者说 `onBlur()` 每个按键。 在键盘下, `event.target.value` 仍然是键被应用之前的值,这导致新字符被删除。 提交( Enter) 使用当前输入值单独处理.
    -   URL 字段是“ 焦点时不受控制” : 当 URL 输入是焦点时, 显示的值是用户输入的原始字符串(`_urlInputRawValue`)而不是父母 `myHref`,因此重置后不再覆盖用户类型(例如输入的点) `sendmsg.co`) (中文(简体) ).
    -   为 URL 输入添加了焦点/ blur 处理(`onUrlInputFocus` 编号 : `onUrlInputBlur`)并通过 `onFocus` 输入协议输入,使焦点旗和原始值保持同步.

## 许可证

## 链接

-   [GitHub 仓库](https://github.com/yourusername/creaditor-monorepo)
-   [报告问题](https://github.com/yourusername/creaditor-monorepo/issues)

* * *

## 常见问题

### @creaditor/newsletter-starterkit 是什么？

Creaditor 通讯编辑器 - Starterkit 用于创建美丽的电子邮件通讯

### 如何安装 @creaditor/newsletter-starterkit？

在项目目录运行 npm install @creaditor/newsletter-starterkit，或使用 pnpm add / yarn add / bun add。

### @creaditor/newsletter-starterkit 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/creaditor\_\_newsletter-starterkit 是否存在。

### @creaditor/newsletter-starterkit 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @creaditor/newsletter-starterkit 可以商用吗？

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

### @creaditor/newsletter-starterkit 的下载量有多少？

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

### @creaditor/newsletter-starterkit 还在维护吗？

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