What is Rich Text Editor?
The Rich Text Editor is a WYSIWYG (What You See Is What You Get) text formatting tool powered by Quill.js. It replaces plain text areas with a professional editor that allows you to format text with bold, italic, lists, headers, and more.
Premium-only feature – Basic users see standard textarea fields with plain text only.
Visual Comparison
| Aspect | Basic (Plain Text) | Premium (Rich Text Editor) |
|---|---|---|
| Interface | Standard HTML textarea | WYSIWYG editor with formatting toolbar |
| Formatting | None – plain text only | Bold, italic, underline, lists, headers, links |
| Toolbar | ❌ No toolbar | ✅ Full formatting toolbar |
| Preview | Plain text display | Formatted text with styles |
| PDF Output | Plain text | Formatted text (preserves bold, lists, etc.) |
| Loading Time | Instant | ~1 second (loads Quill.js from CDN) |
Available Formatting Options
The Rich Text Editor provides the following formatting tools:
| Format Type | Options | Toolbar Button | Use Case |
|---|---|---|---|
| Text Style | • Bold • Italic • Underline | B I U | Emphasize key terms, prices, important conditions |
| Lists | • Ordered list (1, 2, 3…) • Bullet list (•) | 1. 2. 3. • • • | Payment terms, features, specifications, step-by-step instructions |
| Headers | • Header 1 (large) • Header 2 (medium) • Header 3 (small) • Normal text | H1 H2 H3 ▼ | Section titles, subsections, organize long descriptions |
| Links | • Hyperlinks (clickable URLs) | 🔗 | Reference websites, documentation, product pages |
| Utilities | • Clear formatting (remove all styles) | 🧹 | Reset text to plain format, remove unwanted styles |
Not Included (by design):
- ❌ Colors (use template color schemes instead)
- ❌ Font family (templates control typography)
- ❌ Font size (templates define sizing)
- ❌ Images (use Image Gallery section instead)
- ❌ Tables (use Pricing Table instead)
- ❌ Background colors
- ❌ Text alignment (left/center/right)
Reason: Limited formatting options ensure consistency with template designs and prevent visual chaos.
Which Fields Support Rich Text?
Rich Text Editor is available on the following fields:
| Field Location | Field Name | Tab | ID |
|---|---|---|---|
| Offer Details | Offer Description | Basic Info | #in-offer-desc |
| Terms & Conditions | Payment Terms | Terms | #in-pay-terms |
| Terms & Conditions | Bank Account Details | Terms | #in-bank |
| Terms & Conditions | Delivery Time | Terms | #in-lieferzeit |
| Terms & Conditions | Warranty | Terms | #in-garantie |
| Terms & Conditions | Notes / Additional Terms | Terms | #in-hinweise |
Note: Technical Sections use plain textarea (not rich text) because they’re designed for bullet-list content only.
How Rich Text Appears in Preview & PDF
In Form Editor (Premium)
Before typing (empty field):
┌─────────────────────────────────────────────┐
│ [B] [I] [U] [•] [1.] [H▼] [🔗] [🧹] │ ← Toolbar
├─────────────────────────────────────────────┤
│ │
│ Type your text here... │ ← Editor area
│ │
└─────────────────────────────────────────────┘After formatting:
┌─────────────────────────────────────────────┐
│ [B] [I] [U] [•] [1.] [H▼] [🔗] [🧹] │
├─────────────────────────────────────────────┤
│ Payment Terms │ ← H2 header
│ │
│ After signing the contract: │
│ • 50% deposit (3000 EUR) │ ← Bullet list
│ • Remaining 50% after delivery │
│ │
│ Bank transfer to account below. │
│ │
│ Late payments subject to 5% penalty. │ ← Bold text
└─────────────────────────────────────────────┘In Preview (Right Panel)
Formatted text displays exactly as styled:
Payment Terms
═════════════
After signing the contract:
- 50% deposit (3000 EUR)
- Remaining 50% after delivery
Bank transfer to account below.
**Late payments subject to 5% penalty.**In PDF Export
Formatting is preserved completely:
- Bold text appears bold in PDF
- Italic text appears italic in PDF
- Lists maintain bullet points or numbers
- Headers use larger font sizes
- Links become clickable hyperlinks (blue, underlined)
CSS Media Query: @media print ensures formatted text renders correctly when printing/exporting PDF.
Basic vs Premium Interface
Basic User (Plain Text Only)
What Basic users see:
┌─────────────────────────────────────────────┐
│ Payment Terms │
│ ┌─────────────────────────────────────────┐ │
│ │ After signing the contract: │ │ ← Standard textarea
│ │ - 50% deposit (3000 EUR) │ │
│ │ - Remaining 50% after delivery │ │
│ │ │ │
│ │ Bank transfer to account below. │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 🔒 Upgrade to Premium for Rich Text Editor │ ← Upgrade notice
└─────────────────────────────────────────────┘Upgrade Notice:
- Appears below each textarea that supports rich text
- Text: “🔒 Premium users get Rich Text Editor with formatting tools”
- Link to Premium pricing page
Premium User (Rich Text Editor)
What Premium users see:
┌─────────────────────────────────────────────┐
│ Payment Terms │
│ ┌─────────────────────────────────────────┐ │
│ │ [B] [I] [U] [•] [1.] [H▼] [🔗] [🧹] │ │ ← Formatting toolbar
│ ├─────────────────────────────────────────┤ │
│ │ │ │
│ │ Payment Terms │ │ ← Rich text editor
│ │ │ │
│ │ After signing the contract: │ │
│ │ • 50% deposit (3000 EUR) │ │
│ │ • Remaining 50% after delivery │ │
│ │ │ │
│ │ Bank transfer to account below. │ │
│ │ │ │
│ │ Late payments subject to 5% penalty. │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘Original textarea is hidden – Quill editor replaces it completely
How It Works (Technical Overview)
For reference purposes:
PDF export → Print styles preserve formatting
Page loads → JavaScript detects if Premium is active
If Premium → Rich Editor script loads Quill.js from CDN
Quill initializes → Replaces textareas with rich editors (~1 second delay)
User types → Content syncs to hidden textarea in real-time
Preview updates → HTML content renders with formatting
Save offer → Rich HTML stored in database
Load offer → HTML content populates Quill editor
Formatting Tips
Best Practices
DO:
- ✅ Use bold for key terms (prices, deadlines, important conditions)
- ✅ Use lists for payment terms, features, specifications
- ✅ Use headers to organize long descriptions
- ✅ Use italic for notes or optional information
- ✅ Use links to reference external resources
DON’T:
- ❌ Over-format – too much bold/italic reduces impact
- ❌ Use headers for every sentence – only for section titles
- ❌ Mix ordered and bullet lists in same section
- ❌ Underline regular text (looks like links)
- ❌ Create deeply nested lists (max 2 levels)
Troubleshooting
| Issue | Cause | Solution |
|---|---|---|
| Editor not appearing | Premium not active OR JavaScript error | 1. Verify Premium license active 2. Check browser console (F12) for errors 3. Clear browser cache and reload |
| Toolbar buttons not working | Quill.js failed to load from CDN | 1. Check internet connection 2. Disable ad blockers (may block CDN) 3. Refresh page |
| Formatting lost after save | Database not storing HTML properly | 1. Check if Premium active when saved 2. Re-apply formatting and save again 3. Contact support if persists |
| Formatting not in PDF | Print CSS not loading | 1. Check browser’s print preview 2. Try different browser 3. Ensure template CSS loaded |
| Editor shows HTML tags | Quill not initialized properly | 1. Refresh page (Ctrl+F5 / Cmd+Shift+R) 2. Clear browser cache 3. Check console for JS errors |
| Slow loading (editor delay) | CDN loading time (~1 second normal) | This is expected behavior. Wait for toolbar to appear. |
Browser Compatibility
| Browser | Version | Rich Text Editor | Notes |
|---|---|---|---|
| Chrome | 90+ | ✅ Fully supported | Recommended browser |
| Firefox | 88+ | ✅ Fully supported | Works perfectly |
| Safari | 14+ | ✅ Fully supported | Mac/iOS compatible |
| Edge | 90+ | ✅ Fully supported | Chromium-based |
| Opera | 76+ | ✅ Fully supported | Chromium-based |
| Internet Explorer | Any | ❌ Not supported | Use modern browser |
Migration: Basic to Premium
When you upgrade from Basic to Premium:
Existing offers with plain text:
- ✅ Plain text is preserved exactly
- ✅ Open offer → Text appears in rich editor
- ✅ Can now format existing text
- ✅ No data loss
What happens:
- Plain text becomes editable rich text
- No formatting applied automatically
- You can add formatting manually
- Old offers work perfectly