@mdaemon/html-editor 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +138 -0
- package/dist/html-editor.css +692 -0
- package/dist/index.d.ts +489 -0
- package/dist/index.js +42919 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +42919 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# MDHTMLEditor
|
|
2
|
+
|
|
3
|
+
A TinyMCE-compatible HTML editor built on TipTap. This is the core vanilla TypeScript package - for React usage, see `@mdaemon/html-editor-react`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @mdaemon/html-editor
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Vanilla JavaScript/TypeScript
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { HTMLEditor, setTranslate } from '@mdaemon/html-editor';
|
|
17
|
+
import '@mdaemon/html-editor/styles';
|
|
18
|
+
|
|
19
|
+
// Optional: Set up translation function
|
|
20
|
+
setTranslate((key) => myTranslationFunction(key));
|
|
21
|
+
|
|
22
|
+
// Create editor
|
|
23
|
+
const container = document.getElementById('editor');
|
|
24
|
+
const editor = new HTMLEditor(container, {
|
|
25
|
+
height: 400,
|
|
26
|
+
basicEditor: false, // Full toolbar
|
|
27
|
+
includeTemplates: true,
|
|
28
|
+
templates: [
|
|
29
|
+
{ title: 'Greeting', content: '<p>Hello!</p>' }
|
|
30
|
+
],
|
|
31
|
+
fontName: 'Arial',
|
|
32
|
+
fontSize: '12pt',
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// Get/set content
|
|
36
|
+
const html = editor.getContent();
|
|
37
|
+
editor.setContent('<p>New content</p>');
|
|
38
|
+
|
|
39
|
+
// Insert content at cursor
|
|
40
|
+
editor.insertContent('<b>Bold text</b>');
|
|
41
|
+
|
|
42
|
+
// Execute commands (TinyMCE compatible)
|
|
43
|
+
editor.execCommand('bold');
|
|
44
|
+
editor.execCommand('fontsize', false, '14pt');
|
|
45
|
+
|
|
46
|
+
// Listen to events
|
|
47
|
+
editor.on('change', (content) => {
|
|
48
|
+
console.log('Content changed:', content);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
editor.on('dirty', (isDirty) => {
|
|
52
|
+
console.log('Editor dirty state:', isDirty);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// Clean up
|
|
56
|
+
editor.destroy();
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Custom Toolbar Buttons
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
const editor = new HTMLEditor(container, {
|
|
63
|
+
setup: (ed) => {
|
|
64
|
+
ed.ui.registry.addButton('myButton', {
|
|
65
|
+
tooltip: 'My Custom Button',
|
|
66
|
+
text: 'Click Me',
|
|
67
|
+
onAction: () => {
|
|
68
|
+
ed.insertContent('<p>Custom content!</p>');
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Configuration Options
|
|
76
|
+
|
|
77
|
+
| Option | Type | Default | Description |
|
|
78
|
+
|--------|------|---------|-------------|
|
|
79
|
+
| `basicEditor` | boolean | false | Use simplified toolbar for notes/tasks |
|
|
80
|
+
| `includeTemplates` | boolean | false | Show template dropdown |
|
|
81
|
+
| `templates` | Template[] | [] | Array of templates |
|
|
82
|
+
| `dropbox` | boolean | false | Enable Dropbox integration |
|
|
83
|
+
| `images_upload_url` | string | - | URL for image uploads |
|
|
84
|
+
| `font_family_formats` | string | - | Font family options |
|
|
85
|
+
| `font_size_formats` | string | - | Font size options |
|
|
86
|
+
| `fontName` | string | - | Default font family |
|
|
87
|
+
| `fontSize` | string | - | Default font size |
|
|
88
|
+
| `directionality` | 'ltr' \| 'rtl' | 'ltr' | Text direction |
|
|
89
|
+
| `language` | string | 'en' | UI language |
|
|
90
|
+
| `height` | string \| number | 300 | Editor height |
|
|
91
|
+
| `skin` | 'oxide' \| 'oxide-dark' | 'oxide' | Theme |
|
|
92
|
+
| `toolbar_mode` | 'sliding' \| 'wrap' | 'sliding' | Toolbar overflow behavior |
|
|
93
|
+
|
|
94
|
+
## API Reference
|
|
95
|
+
|
|
96
|
+
### Methods
|
|
97
|
+
|
|
98
|
+
- `getContent(): string` - Get HTML content
|
|
99
|
+
- `setContent(html: string): void` - Set HTML content
|
|
100
|
+
- `insertContent(html: string): void` - Insert HTML at cursor
|
|
101
|
+
- `execCommand(cmd: string, ui?: boolean, value?: any): boolean` - Execute editor command
|
|
102
|
+
- `isDirty(): boolean` - Check if content has changed
|
|
103
|
+
- `setDirty(state: boolean): void` - Set dirty state
|
|
104
|
+
- `focus(): void` - Focus the editor
|
|
105
|
+
- `hasFocus(): boolean` - Check if editor has focus
|
|
106
|
+
- `destroy(): void` - Clean up and remove editor
|
|
107
|
+
|
|
108
|
+
### Events
|
|
109
|
+
|
|
110
|
+
- `init` - Editor initialized
|
|
111
|
+
- `change` - Content changed (debounced)
|
|
112
|
+
- `dirty` - Dirty state changed
|
|
113
|
+
- `focus` - Editor focused
|
|
114
|
+
- `blur` - Editor blurred
|
|
115
|
+
|
|
116
|
+
### Supported Commands
|
|
117
|
+
|
|
118
|
+
The following TinyMCE-compatible commands are supported:
|
|
119
|
+
|
|
120
|
+
- `bold`, `italic`, `underline`, `strikethrough`
|
|
121
|
+
- `fontname`, `fontsize`, `lineheight`
|
|
122
|
+
- `forecolor`, `backcolor`
|
|
123
|
+
- `justifyleft`, `justifycenter`, `justifyright`, `justifyfull`
|
|
124
|
+
- `insertunorderedlist`, `insertorderedlist`
|
|
125
|
+
- `indent`, `outdent`
|
|
126
|
+
- `undo`, `redo`
|
|
127
|
+
- `removeformat`
|
|
128
|
+
|
|
129
|
+
## Browser Support
|
|
130
|
+
|
|
131
|
+
- Chrome (latest)
|
|
132
|
+
- Firefox (latest)
|
|
133
|
+
- Safari (latest)
|
|
134
|
+
- Edge (latest)
|
|
135
|
+
|
|
136
|
+
## License
|
|
137
|
+
|
|
138
|
+
UNLICENSED - MDaemon Technologies
|