tessl/npm-wangeditor

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

—

Pending

Overview

Eval results

Files

Editor Management

Name: tessl/npm-wangeditor
Author: tessl

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

Capabilities

Main Constructor

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

/**
 * Creates a new wangEditor instance
 * @param toolbarSelector - CSS selector or DOM element for toolbar container
 * @param textSelector - Optional CSS selector or DOM element for text editor container
 * @returns EditorInstance
 */
function wangEditor(toolbarSelector: string | Element, textSelector?: string | Element): EditorInstance;

Usage Examples:

// Basic usage - toolbar and editor in same container
const editor = new wangEditor('#editor-container');

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

// Using DOM elements instead of selectors
const toolbarEl = document.getElementById('toolbar');
const textEl = document.getElementById('text');
const editor = new wangEditor(toolbarEl, textEl);

Editor Instance

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

interface EditorInstance {
  /** Unique identifier for this editor instance */
  id: string;
  
  /** Configuration object - must be set before create() */
  customConfig: CustomConfig;
  
  /** Text manipulation API (available after create()) */
  txt: TextAPI;
  
  /** Command execution API (available after create()) */
  cmd: CommandAPI;
  
  /** Selection management API (available after create()) */
  selection: SelectionAPI;
  
  /** Menu management API (available after create()) */
  menus: MenusAPI;
  
  /** Image upload API (available after create()) */
  uploadImg: UploadImgAPI;
  
  /** Initialize and create the editor instance */
  create(): void;
  
  /** Initialize selection and position cursor at content end */
  initSelection(newLine?: boolean): void;
}

Create Method

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

/**
 * Initialize and create the editor instance
 * Must be called after setting customConfig options
 * Creates DOM elements and event listeners
 */
create(): void;

Usage Examples:

import wangEditor from 'wangeditor';

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

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

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

// Initialize the editor
editor.create();

// Now editor APIs are available
console.log('Editor ID:', editor.id);
const content = editor.txt.html();

Initialize Selection

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

/**
 * Initialize selection and position cursor at content end
 * @param newLine - Whether to create a new line for cursor placement
 */
initSelection(newLine?: boolean): void;

Usage Examples:

// Initialize with cursor at end
editor.initSelection();

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

// Typically called after setting content
editor.txt.html('<p>Initial content</p>');
editor.initSelection(); // Cursor positioned at end

Instance Properties

Each editor instance has several important properties available after creation.

interface EditorProperties {
  /** Unique string identifier for this editor instance */
  id: string;
  
  /** Configuration object for customizing editor behavior */
  customConfig: CustomConfig;
}

Usage Examples:

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

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

// Access configuration
editor.customConfig.debug = true;
editor.customConfig.zIndex = 15000;

editor.create();

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

Constructor Patterns

Single Container

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

const editor = new wangEditor('#editor-div');
editor.create();
// Creates toolbar at top of #editor-div and content area below

Separate Containers

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

const editor = new wangEditor('#my-toolbar', '#my-content');
editor.create();
// Toolbar renders in #my-toolbar, content in #my-content

Multiple Editors

Create multiple independent editor instances:

const editor1 = new wangEditor('#toolbar1', '#content1');
const editor2 = new wangEditor('#toolbar2', '#content2');

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

editor1.create();
editor2.create();

// Each operates independently
editor1.txt.html('<p>Content for editor 1</p>');
editor2.txt.html('<p>Content for editor 2</p>');

Lifecycle Order

The correct order for editor setup:

// 1. Create instance
const editor = new wangEditor('#toolbar');

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

// 3. Initialize
editor.create();

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

Install with Tessl CLI