tessl/npm-wangeditor

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

wangEditor

Name: tessl/npm-wangeditor
Author: tessl

wangEditor is a lightweight web-based rich text editor (WYSIWYG editor) built with JavaScript and CSS for modern browsers (IE10+). It provides comprehensive rich text editing capabilities with a clean and intuitive interface, supporting standard formatting operations, image insertion, link creation, and table management.

Package Information

Package Name: wangeditor
Package Type: npm
Language: JavaScript
Installation: npm install wangeditor
Browser Support: IE10+, modern browsers (Chrome, Firefox, Safari, Edge)

Core Imports

// ES6 / CommonJS
import wangEditor from 'wangeditor';
// or
const wangEditor = require('wangeditor');

// Browser (global)
const E = window.wangEditor;

Basic Usage

import wangEditor from 'wangeditor';

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

// Optional: separate text container
// const editor = new wangEditor('#toolbar', '#text');

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

// Initialize editor
editor.create();

// Get/set content
const html = editor.txt.html();
editor.txt.html('<p>New content</p>');

Architecture

wangEditor is built around several key components:

Editor Constructor: Main entry point for creating editor instances
Configuration System: Extensive customization through customConfig object
Text API: Content manipulation interface (editor.txt)
Command API: Programmatic formatting operations (editor.cmd)
Selection API: Text selection and cursor management (editor.selection)
Menu System: Toolbar and menu management (editor.menus)
Upload System: Image upload functionality (editor.uploadImg)

Capabilities

Editor Management

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

// Main constructor
function wangEditor(toolbarSelector, textSelector?): EditorInstance;

interface EditorInstance {
  id: string;
  customConfig: CustomConfig;
  create(): void;
  initSelection(newLine?: boolean): void;
}

Editor Management

Content Operations

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

interface TextAPI {
  html(val?: string): string | void;
  text(val?: string): string | void;
  append(html: string): void;
  clear(): void;
  getJSON(): Array<any>;
}

Content Operations

Commands

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

interface CommandAPI {
  do(name: string, value?: any): void;
  queryCommandSupported(name: string): boolean;
}

Commands

Selection Management

Text selection and cursor positioning APIs for programmatic text selection control.

interface SelectionAPI {
  getRange(): Range | null;
  saveRange(range?: Range): void;
  restoreSelection(): void;
  createRangeByElem(elem: Element, toStart: boolean, isCollapseToEnd: boolean): void;
  getSelectionContainerElem(range?: Range): Element;
}

Selection Management

Configuration

Comprehensive configuration options for customizing editor behavior, appearance, and functionality.

interface CustomConfig {
  menus?: string[];
  fontNames?: string[];
  colors?: string[];
  emotions?: Array<any>;
  zIndex?: number;
  debug?: boolean;
  onchange?: (html: string) => void;
  onblur?: (html: string) => void;
  onfocus?: () => void;
  // ... extensive configuration options
}

Configuration

Menu System

Programmatic access to toolbar menus for state management and custom interactions.

interface MenusAPI {
  menus: {[menuName: string]: MenuInstance};
  changeActive(): void;
}

interface MenuInstance {
  type: 'click' | 'droplist' | 'panel';
  $elem: Element;
  tryChangeActive?(): void;
  onClick?(event: Event): void;
}

Menu System

Image Upload

Image upload functionality with support for local uploads, network images, and various cloud storage services.

interface UploadImgAPI {
  uploadImg(files: FileList | File[]): void;
}

interface UploadConfig {
  uploadImgServer?: string;
  uploadImgMaxSize?: number;
  uploadImgMaxLength?: number;
  uploadImgShowBase64?: boolean;
  uploadImgHooks?: UploadHooks;
  customUploadImg?: (files: FileList, insert: Function) => void;
  // ... additional upload options
}

Image Upload

Common Usage Patterns

Content Management

// Get current content
const htmlContent = editor.txt.html();
const plainText = editor.txt.text();
const jsonContent = editor.txt.getJSON();

// Set new content
editor.txt.html('<p>Hello <strong>World</strong></p>');
editor.txt.append('<p>Additional content</p>');
editor.txt.clear(); // Clear all content

Programmatic Formatting

// Apply formatting
editor.cmd.do('bold');
editor.cmd.do('fontSize', '18px');
editor.cmd.do('foreColor', '#ff0000');
editor.cmd.do('insertHTML', '<p>Custom HTML</p>');

Event Handling

editor.customConfig.onchange = function(html) {
    console.log('Content changed:', html);
    // Save to backend, update preview, etc.
};

editor.customConfig.onblur = function(html) {
    console.log('Editor lost focus');
};