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 • Link a form - Embed a form that opens inside the widget

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.

How it works:

Select text in the editor first to turn it into a link, or click the button with no selection to insert a new link
Pick the target article from a searchable list of every other article in the knowledge base
Customize the display text shown to readers — defaults to the article title when no text is selected

Form Linking

Embed a Form

Use the Link a form button to drop any of your forms straight into an article. When a reader clicks the link, the form opens inside the Yaplet widget instead of navigating away.

How it works:

Select text first to convert it into a form link, or click the button with no selection to insert new link text
Choose a form from the searchable list of forms in your organization
Customize the display text — defaults to the form name when no text is selected

Links are stored using the internal yaplet://form/<id> scheme and are automatically recognized on both the hosted knowledge base pages and inside the chat widget — clicking one launches the form as a classic form flow.

The Link a form button only appears when your organization has at least one form created in the form builder.

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.