0
# Editor Management
1

2
Core editor lifecycle management including instance creation, configuration, and initialization.
3

4
## Capabilities
5

6
### Main Constructor
7

8
Creates a new wangEditor instance with specified toolbar and optional text containers.
9

10
```javascript { .api }
11
/**
12
 * Creates a new wangEditor instance
13
 * @param toolbarSelector - CSS selector or DOM element for toolbar container
14
 * @param textSelector - Optional CSS selector or DOM element for text editor container
15
 * @returns EditorInstance
16
 */
17
function wangEditor(toolbarSelector: string | Element, textSelector?: string | Element): EditorInstance;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
// Basic usage - toolbar and editor in same container
24
const editor = new wangEditor('#editor-container');
25

26
// Separate toolbar and text containers
27
const editor = new wangEditor('#toolbar', '#text-area');
28

29
// Using DOM elements instead of selectors
30
const toolbarEl = document.getElementById('toolbar');
31
const textEl = document.getElementById('text');
32
const editor = new wangEditor(toolbarEl, textEl);
33
```
34

35
### Editor Instance
36

37
The editor instance provides access to all editor functionality and APIs.
38

39
```javascript { .api }
40
interface EditorInstance {
41
  /** Unique identifier for this editor instance */
42
  id: string;
43
  
44
  /** Configuration object - must be set before create() */
45
  customConfig: CustomConfig;
46
  
47
  /** Text manipulation API (available after create()) */
48
  txt: TextAPI;
49
  
50
  /** Command execution API (available after create()) */
51
  cmd: CommandAPI;
52
  
53
  /** Selection management API (available after create()) */
54
  selection: SelectionAPI;
55
  
56
  /** Menu management API (available after create()) */
57
  menus: MenusAPI;
58
  
59
  /** Image upload API (available after create()) */
60
  uploadImg: UploadImgAPI;
61
  
62
  /** Initialize and create the editor instance */
63
  create(): void;
64
  
65
  /** Initialize selection and position cursor at content end */
66
  initSelection(newLine?: boolean): void;
67
}
68
```
69

70
### Create Method
71

72
Initializes the editor instance and renders the toolbar and text editor.
73

74
```javascript { .api }
75
/**
76
 * Initialize and create the editor instance
77
 * Must be called after setting customConfig options
78
 * Creates DOM elements and event listeners
79
 */
80
create(): void;
81
```
82

83
**Usage Examples:**
84

85
```javascript
86
import wangEditor from 'wangeditor';
87

88
const editor = new wangEditor('#toolbar');
89

90
// Configure before creating
91
editor.customConfig.onchange = function(html) {
92
    console.log('Content changed:', html);
93
};
94

95
editor.customConfig.menus = [
96
    'head', 'bold', 'fontSize', 'fontName', 'italic', 
97
    'underline', 'foreColor', 'backColor', 'link', 'list'
98
];
99

100
// Initialize the editor
101
editor.create();
102

103
// Now editor APIs are available
104
console.log('Editor ID:', editor.id);
105
const content = editor.txt.html();
106
```
107

108
### Initialize Selection
109

110
Sets up initial text selection and cursor positioning in the editor.
111

112
```javascript { .api }
113
/**
114
 * Initialize selection and position cursor at content end
115
 * @param newLine - Whether to create a new line for cursor placement
116
 */
117
initSelection(newLine?: boolean): void;
118
```
119

120
**Usage Examples:**
121

122
```javascript
123
// Initialize with cursor at end
124
editor.initSelection();
125

126
// Initialize with new line
127
editor.initSelection(true);
128

129
// Typically called after setting content
130
editor.txt.html('<p>Initial content</p>');
131
editor.initSelection(); // Cursor positioned at end
132
```
133

134
### Instance Properties
135

136
Each editor instance has several important properties available after creation.
137

138
```javascript { .api }
139
interface EditorProperties {
140
  /** Unique string identifier for this editor instance */
141
  id: string;
142
  
143
  /** Configuration object for customizing editor behavior */
144
  customConfig: CustomConfig;
145
}
146
```
147

148
**Usage Examples:**
149

150
```javascript
151
const editor = new wangEditor('#toolbar');
152

153
// Unique ID is auto-generated
154
console.log('Editor ID:', editor.id); // e.g., "wangEditor_1640995200000_0.123"
155

156
// Access configuration
157
editor.customConfig.debug = true;
158
editor.customConfig.zIndex = 15000;
159

160
editor.create();
161

162
// All APIs are now available on the instance
163
editor.txt.html('<p>Hello World</p>');
164
editor.cmd.do('bold');
165
```
166

167
## Constructor Patterns
168

169
### Single Container
170

171
Use when toolbar and editor content should be in the same container:
172

173
```javascript
174
const editor = new wangEditor('#editor-div');
175
editor.create();
176
// Creates toolbar at top of #editor-div and content area below
177
```
178

179
### Separate Containers
180

181
Use when you want precise control over toolbar and content placement:
182

183
```javascript
184
const editor = new wangEditor('#my-toolbar', '#my-content');
185
editor.create();
186
// Toolbar renders in #my-toolbar, content in #my-content
187
```
188

189
### Multiple Editors
190

191
Create multiple independent editor instances:
192

193
```javascript
194
const editor1 = new wangEditor('#toolbar1', '#content1');
195
const editor2 = new wangEditor('#toolbar2', '#content2');
196

197
editor1.customConfig.menus = ['bold', 'italic'];
198
editor2.customConfig.menus = ['fontSize', 'foreColor', 'image'];
199

200
editor1.create();
201
editor2.create();
202

203
// Each operates independently
204
editor1.txt.html('<p>Content for editor 1</p>');
205
editor2.txt.html('<p>Content for editor 2</p>');
206
```
207

208
## Lifecycle Order
209

210
The correct order for editor setup:
211

212
```javascript
213
// 1. Create instance
214
const editor = new wangEditor('#toolbar');
215

216
// 2. Configure (before create())
217
editor.customConfig.onchange = function(html) { /* ... */ };
218
editor.customConfig.menus = ['bold', 'italic', 'underline'];
219

220
// 3. Initialize
221
editor.create();
222

223
// 4. Use APIs (after create())
224
editor.txt.html('<p>Initial content</p>');
225
editor.initSelection();
226
```