CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-wangeditor

Lightweight web-based rich text editor (WYSIWYG editor) built with JavaScript and CSS for modern browsers

Pending
Overview
Eval results
Files

content-operations.mddocs/

Content Operations

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

Capabilities

HTML Content Management

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>');
}

Plain Text Management

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;

Append Content

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

Clear Content

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();
}

JSON Content Export

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');

Complete Text API Interface

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>;
}

Common Content Patterns

Content Validation

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;
}

Content Backup and Restore

// 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);
    }
}

Content Migration

// 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);
}

Auto-save Implementation

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

docs

commands.md

configuration.md

content-operations.md

editor-management.md

image-upload.md

index.md

menus.md

selection.md

tile.json