HTML Article Editor

Core Features

Rich Text Formatting

Complete text styling with bold, italic, colors, and typography options

Media & Assets

Image uploads, table insertion, and content embedding tools

Article Tools

Table of contents, cross-linking, and preview functionality

HTML Integration

Direct HTML insertion with automatic sanitization

Text Formatting & History

History Controls

Undo - Revert the last action • Redo - Restore the last undone action

Basic Styles

Bold (Ctrl+B) • Italic (Ctrl+I) • Strike • Underline

Advanced Styles

Highlight • Subscript • Superscript • Clear Formatting

Appearance

Color Picker - Change text color • Font Size - Select from 10px to 32px

Structure & Organization

Headings

Heading 1-3 - Create hierarchical document structure

Lists

Bullet List - Unordered bullet points • Numbered List - Ordered numbered lists • Task List - Interactive checkbox lists

Alignment

Align Left/Center/Right - Text justification • Justify - Full width alignment

Content Insertion

Links & Media

Link - Add hyperlinks • Image - Upload and insert images • Table - Create 3×3 tables with headers

Blocks

Code Block - Formatted code blocks • Quote - Blockquotes • Horizontal Line - Dividing lines

Article Features

Table of Contents - Auto-generate TOC from headings • Cross Link - Link to other articles

Table Editing Controls

Table editing controls appear automatically when your cursor is inside a table.

Structure

Add/Delete Column - Insert or remove columns • Add/Delete Row - Insert or remove rows

Formatting

Header Column - Convert column to header • Header Row - Convert row to header

Cell Operations

Merge Cells - Combine selected cells • Split Cell - Divide merged cells

HTML Insertion Feature

The Insert HTML button provides direct access to paste raw HTML code into your content.

Access HTML Insertion

Click the Insert HTML button in the top-right corner of the editor

Paste Your Code

Enter your HTML code in the modal textarea

Insert Content

Click Insert HTML to add it at the cursor position

Use HTML insertion for complex layouts, custom styling, or content copied from other sources that requires precise HTML structure.

Example Usage

<div class="custom-card">
  <h3>Custom HTML Content</h3>
  <p>This content was inserted as raw HTML.</p>
</div>

Advanced Capabilities

Article Preview

Live Preview

The Preview button shows your article exactly as readers will see it.

Features:

Full article rendering with proper styling
Widget theme selection (if multiple themes available)
Responsive preview layout
Table of contents display
Image and media rendering

Cross-Linking System

Article Linking

Link seamlessly between articles using the Cross Link button.

Capabilities:

Access predefined article URLs
Quick search through available articles
Automatic link formatting with proper targets
Maintains navigation context

Image Management

Automatic Processing:

Supports WebP, PNG, and JPEG formats
Images are resized and optimized

Table of Contents Generation

Auto-TOC Features:

Generates navigation from H1-H6 headings
Creates nested, clickable navigation
Updates dynamically as you edit headings
Consistent styling with article theme

Widget Integration

Content automatically adapts to widget color schemes:

Dynamic CSS custom properties
Theme-aware styling
Consistent visual appearance
Preview with multiple themes

Usage Notes

All content is automatically converted to HTML with proper semantic markup and styling classes. The editor maintains content integrity while providing a user-friendly editing experience.