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
```