0
# wangEditor
1
2
wangEditor is a lightweight web-based rich text editor (WYSIWYG editor) built with JavaScript and CSS for modern browsers (IE10+). It provides comprehensive rich text editing capabilities with a clean and intuitive interface, supporting standard formatting operations, image insertion, link creation, and table management.
3
4
## Package Information
5
6
- **Package Name**: wangeditor
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install wangeditor`
10
- **Browser Support**: IE10+, modern browsers (Chrome, Firefox, Safari, Edge)
11
12
## Core Imports
13
14
```javascript
15
// ES6 / CommonJS
16
import wangEditor from 'wangeditor';
17
// or
18
const wangEditor = require('wangeditor');
19
20
// Browser (global)
21
const E = window.wangEditor;
22
```
23
24
## Basic Usage
25
26
```javascript
27
import wangEditor from 'wangeditor';
28
29
// Create editor instance
30
const editor = new wangEditor('#toolbar'); // toolbar container
31
32
// Optional: separate text container
33
// const editor = new wangEditor('#toolbar', '#text');
34
35
// Configure editor (optional)
36
editor.customConfig.onchange = function (html) {
37
console.log('Content changed:', html);
38
};
39
40
// Initialize editor
41
editor.create();
42
43
// Get/set content
44
const html = editor.txt.html();
45
editor.txt.html('<p>New content</p>');
46
```
47
48
## Architecture
49
50
wangEditor is built around several key components:
51
52
- **Editor Constructor**: Main entry point for creating editor instances
53
- **Configuration System**: Extensive customization through `customConfig` object
54
- **Text API**: Content manipulation interface (`editor.txt`)
55
- **Command API**: Programmatic formatting operations (`editor.cmd`)
56
- **Selection API**: Text selection and cursor management (`editor.selection`)
57
- **Menu System**: Toolbar and menu management (`editor.menus`)
58
- **Upload System**: Image upload functionality (`editor.uploadImg`)
59
60
## Capabilities
61
62
### Editor Management
63
64
Core editor lifecycle management including instance creation, configuration, and initialization.
65
66
```javascript { .api }
67
// Main constructor
68
function wangEditor(toolbarSelector, textSelector?): EditorInstance;
69
70
interface EditorInstance {
71
id: string;
72
customConfig: CustomConfig;
73
create(): void;
74
initSelection(newLine?: boolean): void;
75
}
76
```
77
78
[Editor Management](./editor-management.md)
79
80
### Content Operations
81
82
Text and HTML content manipulation API for getting, setting, and modifying editor content.
83
84
```javascript { .api }
85
interface TextAPI {
86
html(val?: string): string | void;
87
text(val?: string): string | void;
88
append(html: string): void;
89
clear(): void;
90
getJSON(): Array<any>;
91
}
92
```
93
94
[Content Operations](./content-operations.md)
95
96
### Commands
97
98
Programmatic formatting and editing commands for bold, italic, colors, and other rich text operations.
99
100
```javascript { .api }
101
interface CommandAPI {
102
do(name: string, value?: any): void;
103
queryCommandSupported(name: string): boolean;
104
}
105
```
106
107
[Commands](./commands.md)
108
109
### Selection Management
110
111
Text selection and cursor positioning APIs for programmatic text selection control.
112
113
```javascript { .api }
114
interface SelectionAPI {
115
getRange(): Range | null;
116
saveRange(range?: Range): void;
117
restoreSelection(): void;
118
createRangeByElem(elem: Element, toStart: boolean, isCollapseToEnd: boolean): void;
119
getSelectionContainerElem(range?: Range): Element;
120
}
121
```
122
123
[Selection Management](./selection.md)
124
125
### Configuration
126
127
Comprehensive configuration options for customizing editor behavior, appearance, and functionality.
128
129
```javascript { .api }
130
interface CustomConfig {
131
menus?: string[];
132
fontNames?: string[];
133
colors?: string[];
134
emotions?: Array<any>;
135
zIndex?: number;
136
debug?: boolean;
137
onchange?: (html: string) => void;
138
onblur?: (html: string) => void;
139
onfocus?: () => void;
140
// ... extensive configuration options
141
}
142
```
143
144
[Configuration](./configuration.md)
145
146
### Menu System
147
148
Programmatic access to toolbar menus for state management and custom interactions.
149
150
```javascript { .api }
151
interface MenusAPI {
152
menus: {[menuName: string]: MenuInstance};
153
changeActive(): void;
154
}
155
156
interface MenuInstance {
157
type: 'click' | 'droplist' | 'panel';
158
$elem: Element;
159
tryChangeActive?(): void;
160
onClick?(event: Event): void;
161
}
162
```
163
164
[Menu System](./menus.md)
165
166
### Image Upload
167
168
Image upload functionality with support for local uploads, network images, and various cloud storage services.
169
170
```javascript { .api }
171
interface UploadImgAPI {
172
uploadImg(files: FileList | File[]): void;
173
}
174
175
interface UploadConfig {
176
uploadImgServer?: string;
177
uploadImgMaxSize?: number;
178
uploadImgMaxLength?: number;
179
uploadImgShowBase64?: boolean;
180
uploadImgHooks?: UploadHooks;
181
customUploadImg?: (files: FileList, insert: Function) => void;
182
// ... additional upload options
183
}
184
```
185
186
[Image Upload](./image-upload.md)
187
188
## Common Usage Patterns
189
190
### Content Management
191
```javascript
192
// Get current content
193
const htmlContent = editor.txt.html();
194
const plainText = editor.txt.text();
195
const jsonContent = editor.txt.getJSON();
196
197
// Set new content
198
editor.txt.html('<p>Hello <strong>World</strong></p>');
199
editor.txt.append('<p>Additional content</p>');
200
editor.txt.clear(); // Clear all content
201
```
202
203
### Programmatic Formatting
204
```javascript
205
// Apply formatting
206
editor.cmd.do('bold');
207
editor.cmd.do('fontSize', '18px');
208
editor.cmd.do('foreColor', '#ff0000');
209
editor.cmd.do('insertHTML', '<p>Custom HTML</p>');
210
```
211
212
### Event Handling
213
```javascript
214
editor.customConfig.onchange = function(html) {
215
console.log('Content changed:', html);
216
// Save to backend, update preview, etc.
217
};
218
219
editor.customConfig.onblur = function(html) {
220
console.log('Editor lost focus');
221
};
222
```