Lightweight web-based rich text editor (WYSIWYG editor) built with JavaScript and CSS for modern browsers
—
Text and HTML content manipulation API for getting, setting, and modifying editor content.
Get or set the HTML content of the editor.
/**
* Get or set HTML content of the editor
* @param val - Optional HTML string to set as content
* @returns Current HTML content when called without arguments, void when setting
*/
html(val?: string): string | void;Usage Examples:
// Get current HTML content
const currentHtml = editor.txt.html();
console.log(currentHtml); // e.g., "<p>Hello <strong>world</strong></p>"
// Set new HTML content
editor.txt.html('<p>New <em>content</em> here</p>');
// Clear and set content
editor.txt.html('');
editor.txt.html('<h1>Fresh Start</h1><p>With new content</p>');
// Conditional content setting
if (editor.txt.html().length === 0) {
editor.txt.html('<p>Default content</p>');
}Get or set the plain text content (HTML tags stripped).
/**
* Get or set plain text content of the editor
* When getting: returns plain text with HTML tags stripped
* When setting: wraps content in <p> tags
* @param val - Optional plain text string to set as content
* @returns Current plain text when called without arguments, void when setting
*/
text(val?: string): string | void;Usage Examples:
// Get plain text content (strips HTML tags)
const plainText = editor.txt.text();
console.log(plainText); // e.g., "Hello world" (from "<p>Hello <strong>world</strong></p>")
// Set plain text (gets wrapped in <p> tags)
editor.txt.text('This is plain text content');
// Results in: <p>This is plain text content</p>
// Extract text for search or validation
const wordCount = editor.txt.text().split(' ').length;
const hasContent = editor.txt.text().trim().length > 0;Add HTML content to the end of the editor.
/**
* Append HTML content to the end of the editor
* @param html - HTML string to append
*/
append(html: string): void;Usage Examples:
// Append new paragraph
editor.txt.append('<p>This content is added to the end</p>');
// Append formatted content
editor.txt.append('<h2>New Section</h2><p>Section content here</p>');
// Append in response to user action
function addSignature() {
editor.txt.append('<hr><p><em>Best regards,<br>Your Name</em></p>');
}
// Append with current timestamp
const timestamp = new Date().toLocaleString();
editor.txt.append(`<p><small>Added on ${timestamp}</small></p>`);Remove all content from the editor.
/**
* Clear all content from the editor
*/
clear(): void;Usage Examples:
// Clear all content
editor.txt.clear();
// Clear with confirmation
if (confirm('Are you sure you want to clear all content?')) {
editor.txt.clear();
}
// Clear and set new content
editor.txt.clear();
editor.txt.html('<p>Starting fresh...</p>');
// Reset to default state
function resetEditor() {
editor.txt.clear();
editor.initSelection();
}Get editor content as a structured JSON representation.
/**
* Get editor content as JSON structure
* @returns Array representing the document structure
*/
getJSON(): Array<any>;Usage Examples:
// Get structured content representation
const jsonContent = editor.txt.getJSON();
console.log(jsonContent);
// Example output:
// [
// {
// "tag": "p",
// "children": [
// {
// "text": "Hello "
// },
// {
// "tag": "strong",
// "children": [{"text": "world"}]
// }
// ]
// }
// ]
// Store structured content
const contentData = {
html: editor.txt.html(),
text: editor.txt.text(),
json: editor.txt.getJSON(),
timestamp: Date.now()
};
localStorage.setItem('editorContent', JSON.stringify(contentData));
// Use for content analysis
const json = editor.txt.getJSON();
const hasImages = json.some(node => node.tag === 'img');
const hasLinks = json.some(node => node.tag === 'a');interface TextAPI {
/** Get or set HTML content */
html(val?: string): string | void;
/** Get or set plain text content */
text(val?: string): string | void;
/** Append HTML content to the end */
append(html: string): void;
/** Clear all content */
clear(): void;
/** Get content as JSON structure */
getJSON(): Array<any>;
}function validateContent() {
const text = editor.txt.text().trim();
const html = editor.txt.html();
if (text.length === 0) {
alert('Content cannot be empty');
return false;
}
if (text.length > 5000) {
alert('Content too long (max 5000 characters)');
return false;
}
return true;
}// Backup current content
function backupContent() {
const backup = {
html: editor.txt.html(),
text: editor.txt.text(),
json: editor.txt.getJSON()
};
localStorage.setItem('contentBackup', JSON.stringify(backup));
}
// Restore from backup
function restoreContent() {
const backup = localStorage.getItem('contentBackup');
if (backup) {
const data = JSON.parse(backup);
editor.txt.html(data.html);
}
}// Convert between different content formats
function convertContent() {
// Get current content
const html = editor.txt.html();
// Process/transform the content
const processedHtml = html
.replace(/<strong>/g, '<b>')
.replace(/<\/strong>/g, '</b>')
.replace(/<em>/g, '<i>')
.replace(/<\/em>/g, '</i>');
// Set the transformed content
editor.txt.html(processedHtml);
}let autoSaveTimer;
editor.customConfig.onchange = function(html) {
// Clear existing timer
clearTimeout(autoSaveTimer);
// Set new timer for auto-save
autoSaveTimer = setTimeout(() => {
saveContent({
html: editor.txt.html(),
text: editor.txt.text(),
json: editor.txt.getJSON()
});
}, 2000); // Save after 2 seconds of inactivity
};
function saveContent(content) {
// Save to server, localStorage, etc.
console.log('Auto-saving content...', content);
}Install with Tessl CLI
npx tessl i tessl/npm-wangeditor