tessl/npm-wangeditor

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

—

Pending

Overview

Eval results

Files

Commands

Name: tessl/npm-wangeditor
Author: tessl

Programmatic formatting and editing commands for bold, italic, colors, and other rich text operations.

Capabilities

Execute Command

Execute formatting and editing commands programmatically.

/**
 * Execute editing commands (bold, italic, fontSize, etc.)
 * @param name - Command name (e.g., 'bold', 'fontSize', 'foreColor')
 * @param value - Optional command value (e.g., font size, color)
 */
do(name: string, value?: any): void;

Usage Examples:

// Text formatting commands
editor.cmd.do('bold');           // Toggle bold
editor.cmd.do('italic');         // Toggle italic
editor.cmd.do('underline');      // Toggle underline
editor.cmd.do('strikeThrough');  // Toggle strikethrough

// Commands with values
editor.cmd.do('fontSize', '18px');     // Set font size
editor.cmd.do('fontName', 'Arial');    // Set font family
editor.cmd.do('foreColor', '#ff0000'); // Set text color
editor.cmd.do('backColor', '#ffff00'); // Set background color

// Insert content
editor.cmd.do('insertHTML', '<p>Custom <strong>HTML</strong> content</p>');

// Text alignment
editor.cmd.do('justifyLeft');
editor.cmd.do('justifyCenter');
editor.cmd.do('justifyRight');

// Lists
editor.cmd.do('insertOrderedList');   // Numbered list
editor.cmd.do('insertUnorderedList'); // Bulleted list

// Undo/Redo
editor.cmd.do('undo');
editor.cmd.do('redo');

Query Command Support

Check if a command is supported by the browser/editor.

/**
 * Check if a command is supported
 * @param name - Command name to check
 * @returns true if command is supported, false otherwise
 */
queryCommandSupported(name: string): boolean;

Usage Examples:

// Check command support before using
if (editor.cmd.queryCommandSupported('bold')) {
    editor.cmd.do('bold');
} else {
    console.log('Bold command not supported');
}

// Build dynamic UI based on support
const supportedCommands = ['bold', 'italic', 'underline', 'strikeThrough']
    .filter(cmd => editor.cmd.queryCommandSupported(cmd));

console.log('Supported formatting commands:', supportedCommands);

Available Commands

Text Formatting Commands

// Basic text formatting (no value required)
editor.cmd.do('bold');         // Toggle bold text
editor.cmd.do('italic');       // Toggle italic text  
editor.cmd.do('underline');    // Toggle underlined text
editor.cmd.do('strikeThrough'); // Toggle strikethrough text

Font Commands

// Font size (value: CSS font-size string)
editor.cmd.do('fontSize', '16px');
editor.cmd.do('fontSize', '1.2em');
editor.cmd.do('fontSize', 'large');

// Font family (value: font family name)
editor.cmd.do('fontName', 'Arial');
editor.cmd.do('fontName', '微软雅黑');
editor.cmd.do('fontName', 'Helvetica, sans-serif');

Color Commands

// Text color (value: CSS color string)
editor.cmd.do('foreColor', '#ff0000');  // Hex color
editor.cmd.do('foreColor', 'red');      // Named color
editor.cmd.do('foreColor', 'rgb(255, 0, 0)'); // RGB color

// Background color (value: CSS color string)
editor.cmd.do('backColor', '#ffff00');  // Yellow background
editor.cmd.do('backColor', 'transparent'); // Clear background

Alignment Commands

// Text alignment (no value required)
editor.cmd.do('justifyLeft');    // Align left
editor.cmd.do('justifyCenter');  // Align center
editor.cmd.do('justifyRight');   // Align right

List Commands

// List creation (no value required)
editor.cmd.do('insertOrderedList');   // Create numbered list
editor.cmd.do('insertUnorderedList'); // Create bulleted list

Content Insertion Commands

// Insert HTML content (value: HTML string)
editor.cmd.do('insertHTML', '<p>New paragraph</p>');
editor.cmd.do('insertHTML', '<img src="image.jpg" alt="Image">');
editor.cmd.do('insertHTML', '<a href="http://example.com">Link</a>');

History Commands

// Undo/Redo operations (no value required)
editor.cmd.do('undo');  // Undo last action
editor.cmd.do('redo');  // Redo last undone action

Query Command Value

Get the current value of a command in the selection.

/**
 * Get current value of a command
 * @param name - Command name to query
 * @returns Current value of the command
 */
queryCommandValue(name: string): string;

Usage Examples:

// Get current font size
const currentFontSize = editor.cmd.queryCommandValue('fontSize');
console.log('Current font size:', currentFontSize);

// Get current font name
const currentFont = editor.cmd.queryCommandValue('fontName');
console.log('Current font:', currentFont);

// Get current text color
const currentColor = editor.cmd.queryCommandValue('foreColor');
console.log('Current text color:', currentColor);

Query Command State

Check the current state of a toggle command.

/**
 * Check current state of a toggle command
 * @param name - Command name to check
 * @returns true if command is active, false otherwise
 */
queryCommandState(name: string): boolean;

Usage Examples:

// Check if text is bold
const isBold = editor.cmd.queryCommandState('bold');
console.log('Text is bold:', isBold);

// Check if text is italic
const isItalic = editor.cmd.queryCommandState('italic');
console.log('Text is italic:', isItalic);

// Update UI button states
function updateFormatButtons() {
    document.getElementById('bold-btn').classList.toggle('active', 
        editor.cmd.queryCommandState('bold'));
    document.getElementById('italic-btn').classList.toggle('active', 
        editor.cmd.queryCommandState('italic'));
    document.getElementById('underline-btn').classList.toggle('active', 
        editor.cmd.queryCommandState('underline'));
}

Complete Command API Interface

interface CommandAPI {
  /** Execute a formatting or editing command */
  do(name: string, value?: any): void;
  
  /** Check if a command is supported */
  queryCommandSupported(name: string): boolean;
  
  /** Get current value of a command */
  queryCommandValue(name: string): string;
  
  /** Check current state of a toggle command */
  queryCommandState(name: string): boolean;
}

Advanced Command Usage

Conditional Formatting

// Apply formatting based on conditions
function applyConditionalFormatting(condition, format, value) {
    if (condition && editor.cmd.queryCommandSupported(format)) {
        editor.cmd.do(format, value);
    }
}

// Usage examples
const isImportant = true;
applyConditionalFormatting(isImportant, 'bold');
applyConditionalFormatting(isImportant, 'foreColor', '#ff0000');

Batch Commands

// Apply multiple formatting commands
function applyBatchFormatting(commands) {
    commands.forEach(({command, value}) => {
        if (editor.cmd.queryCommandSupported(command)) {
            editor.cmd.do(command, value);
        }
    });
}

// Usage
applyBatchFormatting([
    {command: 'bold'},
    {command: 'fontSize', value: '18px'},
    {command: 'foreColor', value: '#0066cc'}
]);

Format Toggle Implementation

// Custom toggle for formatting commands
function toggleFormat(command) {
    // Note: Some commands like 'bold' automatically toggle
    // Others may need custom logic
    editor.cmd.do(command);
}

// Create UI buttons that toggle formatting
const formatButtons = [
    {name: 'Bold', command: 'bold'},
    {name: 'Italic', command: 'italic'},
    {name: 'Underline', command: 'underline'}
];

formatButtons.forEach(btn => {
    const button = document.createElement('button');
    button.textContent = btn.name;
    button.onclick = () => toggleFormat(btn.command);
    document.getElementById('custom-toolbar').appendChild(button);
});

Custom Content Insertion

// Helper functions for common content insertion
function insertTable(rows = 2, cols = 2) {
    let tableHtml = '<table border="1"><tbody>';
    for (let i = 0; i < rows; i++) {
        tableHtml += '<tr>';
        for (let j = 0; j < cols; j++) {
            tableHtml += '<td>&nbsp;</td>';
        }
        tableHtml += '</tr>';
    }
    tableHtml += '</tbody></table>';
    
    editor.cmd.do('insertHTML', tableHtml);
}

function insertTimestamp() {
    const now = new Date().toLocaleString();
    editor.cmd.do('insertHTML', `<span style="color: #666;">[${now}]</span> `);
}

function insertHorizontalRule() {
    editor.cmd.do('insertHTML', '<hr>');
}

Command Validation

// Validate commands before execution
function executeCommand(command, value) {
    // Check if command is supported
    if (!editor.cmd.queryCommandSupported(command)) {
        console.warn(`Command '${command}' is not supported`);
        return false;
    }
    
    // Validate values for specific commands
    if (command === 'fontSize' && value) {
        const validSizes = ['12px', '14px', '16px', '18px', '24px', '32px'];
        if (!validSizes.includes(value)) {
            console.warn(`Invalid font size: ${value}`);
            return false;
        }
    }
    
    if (command === 'foreColor' && value) {
        // Basic color validation
        const colorRegex = /^#[0-9A-F]{6}$/i;
        if (!colorRegex.test(value) && !CSS.supports('color', value)) {
            console.warn(`Invalid color: ${value}`);
            return false;
        }
    }
    
    // Execute the command
    editor.cmd.do(command, value);
    return true;
}

Install with Tessl CLI