@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
259 lines (202 loc) ā¢ 6.24 kB
Markdown
# /newsletter-starterkit
> š§ A powerful visual editor for creating beautiful email newsletters
A drag-and-drop newsletter editor with everything built-in. No external dependencies required!
## āØ Features
- šØ **Visual Drag & Drop** - Intuitive interface for building newsletters
- š± **Responsive Design** - Mobile-friendly emails out of the box
- š§ **Customizable** - Full control over styles and components
- š **i18n Support** - Multiple languages supported
- š¾ **Auto-save** - Never lose your work
- š **Rich Text Editor** - Powerful text editing capabilities
- š¼ļø **Media Gallery** - Easy image and media management
- šÆ **Merge Tags** - Personalize emails for each recipient
- ā” **Self-Contained** - All files bundled, no CDN required
## š¦ Installation
```bash
npm install /newsletter-starterkit
```
Or with yarn:
```bash
yarn add /newsletter-starterkit
```
## š Quick Start
### Simple HTML Integration
```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>
```
### With Configuration
```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
### Constructor Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `target` | HTMLElement | required | The DOM element to mount the editor |
| `width` | string | '650px' | Width of the newsletter |
| `language` | string | 'en' | Editor language (en, he, etc.) |
| `languageJson` | object | - | Custom language translations |
| `documentName` | string | - | Name of the document |
| `components` | array | [] | Initial newsletter components |
| `user` | object | - | User information (id, email, name, logo) |
| `onSave` | function | - | Called when content is saved |
| `onChange` | function | - | Called when content changes |
| `onSendTestEmail` | function | - | Called when test email is requested |
| `fonts` | array | - | Available fonts |
| `mergeTags` | object | - | Merge tags for personalization |
| `plugins` | array | [] | Additional plugins |
### Methods
```javascript
// Get newsletter data as JSON
const data = await editor.commands.toJSON();
```
## šØ Customization
### Custom Fonts
```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'
}
]
});
```
### Merge Tags (Personalization)
```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'
}
});
```
## š Internationalization
Supported languages:
- English (en)
- Hebrew (he)
- Custom (provide your own languageJson)
```javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
language: 'he', // Hebrew
// Or provide custom translations:
languageJson: {
"save": "Save",
"cancel": "Cancel",
// ... more translations
}
});
```
## š Package Contents
```
/newsletter-starterkit/
āāā dist/
āāā creaditor.bundle.js (2.2MB - Main bundle)
āāā index.html (Demo page)
āāā [chunk files].js (Lazy-loaded modules)
```
## š± Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## š” Integration Examples
### With CDN (if self-hosting)
```html
<script src="https://your-cdn.com/creaditor.bundle.js"></script>
<script>
const editor = new cdtrStarter({
target: document.getElementById('root')
});
</script>
```
### With React (Load via useEffect)
```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} />;
}
```
## š¤ Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## š License
ISC Ā© Adi L
## š Links
- [GitHub Repository](https://github.com/yourusername/creaditor-monorepo)
- [Report Issues](https://github.com/yourusername/creaditor-monorepo/issues)
---
Made with ā¤ļø by Adi L