0
# Content Operations
1

2
Text and HTML content manipulation API for getting, setting, and modifying editor content.
3

4
## Capabilities
5

6
### HTML Content Management
7

8
Get or set the HTML content of the editor.
9

10
```javascript { .api }
11
/**
12
 * Get or set HTML content of the editor
13
 * @param val - Optional HTML string to set as content
14
 * @returns Current HTML content when called without arguments, void when setting
15
 */
16
html(val?: string): string | void;
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
// Get current HTML content
23
const currentHtml = editor.txt.html();
24
console.log(currentHtml); // e.g., "<p>Hello <strong>world</strong></p>"
25

26
// Set new HTML content
27
editor.txt.html('<p>New <em>content</em> here</p>');
28

29
// Clear and set content
30
editor.txt.html('');
31
editor.txt.html('<h1>Fresh Start</h1><p>With new content</p>');
32

33
// Conditional content setting
34
if (editor.txt.html().length === 0) {
35
    editor.txt.html('<p>Default content</p>');
36
}
37
```
38

39
### Plain Text Management
40

41
Get or set the plain text content (HTML tags stripped).
42

43
```javascript { .api }
44
/**
45
 * Get or set plain text content of the editor
46
 * When getting: returns plain text with HTML tags stripped
47
 * When setting: wraps content in <p> tags
48
 * @param val - Optional plain text string to set as content
49
 * @returns Current plain text when called without arguments, void when setting
50
 */
51
text(val?: string): string | void;
52
```
53

54
**Usage Examples:**
55

56
```javascript
57
// Get plain text content (strips HTML tags)
58
const plainText = editor.txt.text();
59
console.log(plainText); // e.g., "Hello world" (from "<p>Hello <strong>world</strong></p>")
60

61
// Set plain text (gets wrapped in <p> tags)
62
editor.txt.text('This is plain text content');
63
// Results in: <p>This is plain text content</p>
64

65
// Extract text for search or validation
66
const wordCount = editor.txt.text().split(' ').length;
67
const hasContent = editor.txt.text().trim().length > 0;
68
```
69

70
### Append Content
71

72
Add HTML content to the end of the editor.
73

74
```javascript { .api }
75
/**
76
 * Append HTML content to the end of the editor
77
 * @param html - HTML string to append
78
 */
79
append(html: string): void;
80
```
81

82
**Usage Examples:**
83

84
```javascript
85
// Append new paragraph
86
editor.txt.append('<p>This content is added to the end</p>');
87

88
// Append formatted content
89
editor.txt.append('<h2>New Section</h2><p>Section content here</p>');
90

91
// Append in response to user action
92
function addSignature() {
93
    editor.txt.append('<hr><p><em>Best regards,<br>Your Name</em></p>');
94
}
95

96
// Append with current timestamp
97
const timestamp = new Date().toLocaleString();
98
editor.txt.append(`<p><small>Added on ${timestamp}</small></p>`);
99
```
100

101
### Clear Content
102

103
Remove all content from the editor.
104

105
```javascript { .api }
106
/**
107
 * Clear all content from the editor
108
 */
109
clear(): void;
110
```
111

112
**Usage Examples:**
113

114
```javascript
115
// Clear all content
116
editor.txt.clear();
117

118
// Clear with confirmation
119
if (confirm('Are you sure you want to clear all content?')) {
120
    editor.txt.clear();
121
}
122

123
// Clear and set new content
124
editor.txt.clear();
125
editor.txt.html('<p>Starting fresh...</p>');
126

127
// Reset to default state
128
function resetEditor() {
129
    editor.txt.clear();
130
    editor.initSelection();
131
}
132
```
133

134
### JSON Content Export
135

136
Get editor content as a structured JSON representation.
137

138
```javascript { .api }
139
/**
140
 * Get editor content as JSON structure
141
 * @returns Array representing the document structure
142
 */
143
getJSON(): Array<any>;
144
```
145

146
**Usage Examples:**
147

148
```javascript
149
// Get structured content representation
150
const jsonContent = editor.txt.getJSON();
151
console.log(jsonContent);
152
// Example output:
153
// [
154
//   {
155
//     "tag": "p",
156
//     "children": [
157
//       {
158
//         "text": "Hello "
159
//       },
160
//       {
161
//         "tag": "strong",
162
//         "children": [{"text": "world"}]
163
//       }
164
//     ]
165
//   }
166
// ]
167

168
// Store structured content
169
const contentData = {
170
    html: editor.txt.html(),
171
    text: editor.txt.text(),
172
    json: editor.txt.getJSON(),
173
    timestamp: Date.now()
174
};
175
localStorage.setItem('editorContent', JSON.stringify(contentData));
176

177
// Use for content analysis
178
const json = editor.txt.getJSON();
179
const hasImages = json.some(node => node.tag === 'img');
180
const hasLinks = json.some(node => node.tag === 'a');
181
```
182

183
## Complete Text API Interface
184

185
```javascript { .api }
186
interface TextAPI {
187
  /** Get or set HTML content */
188
  html(val?: string): string | void;
189
  
190
  /** Get or set plain text content */
191
  text(val?: string): string | void;
192
  
193
  /** Append HTML content to the end */
194
  append(html: string): void;
195
  
196
  /** Clear all content */
197
  clear(): void;
198
  
199
  /** Get content as JSON structure */
200
  getJSON(): Array<any>;
201
}
202
```
203

204
## Common Content Patterns
205

206
### Content Validation
207

208
```javascript
209
function validateContent() {
210
    const text = editor.txt.text().trim();
211
    const html = editor.txt.html();
212
    
213
    if (text.length === 0) {
214
        alert('Content cannot be empty');
215
        return false;
216
    }
217
    
218
    if (text.length > 5000) {
219
        alert('Content too long (max 5000 characters)');
220
        return false;
221
    }
222
    
223
    return true;
224
}
225
```
226

227
### Content Backup and Restore
228

229
```javascript
230
// Backup current content
231
function backupContent() {
232
    const backup = {
233
        html: editor.txt.html(),
234
        text: editor.txt.text(),
235
        json: editor.txt.getJSON()
236
    };
237
    localStorage.setItem('contentBackup', JSON.stringify(backup));
238
}
239

240
// Restore from backup
241
function restoreContent() {
242
    const backup = localStorage.getItem('contentBackup');
243
    if (backup) {
244
        const data = JSON.parse(backup);
245
        editor.txt.html(data.html);
246
    }
247
}
248
```
249

250
### Content Migration
251

252
```javascript
253
// Convert between different content formats
254
function convertContent() {
255
    // Get current content
256
    const html = editor.txt.html();
257
    
258
    // Process/transform the content
259
    const processedHtml = html
260
        .replace(/<strong>/g, '<b>')
261
        .replace(/<\/strong>/g, '</b>')
262
        .replace(/<em>/g, '<i>')
263
        .replace(/<\/em>/g, '</i>');
264
    
265
    // Set the transformed content
266
    editor.txt.html(processedHtml);
267
}
268
```
269

270
### Auto-save Implementation
271

272
```javascript
273
let autoSaveTimer;
274

275
editor.customConfig.onchange = function(html) {
276
    // Clear existing timer
277
    clearTimeout(autoSaveTimer);
278
    
279
    // Set new timer for auto-save
280
    autoSaveTimer = setTimeout(() => {
281
        saveContent({
282
            html: editor.txt.html(),
283
            text: editor.txt.text(),
284
            json: editor.txt.getJSON()
285
        });
286
    }, 2000); // Save after 2 seconds of inactivity
287
};
288

289
function saveContent(content) {
290
    // Save to server, localStorage, etc.
291
    console.log('Auto-saving content...', content);
292
}
293
```