@creaditor/ newsletter- starterkit (英语)

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

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

* 特性

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

* 安装

npm install @creaditor/newsletter-starterkit

或用纱线:

yarn add @creaditor/newsletter-starterkit

QQ 快速启动

简单的 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>

带有配置

const editor = new cdtrStarter({
    target: document.getElementById('root'),
    width: '650px',
    language: 'en',
    
    // Document name
    documentName: 'My Newsletter',
    
    // User information
    user: {
        id: 'user123',
        email: '[email protected]',
        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

构造选项

方法

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

🎨自定义

自定义字体

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'
        }
    ]
});

合并标签( 个人化 )

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)

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( 如果自主办)

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

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

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 仓库
• 报告问题