Skip to main content

Strapi WYSIWYG Editor Documentation

This document provides a comprehensive guide to using the Strapi WYSIWYG (What You See Is What You Get) editor for content management. The WYSIWYG editor allows you to create rich text content for your Strapi entries without needing to write HTML or markdown directly.

Getting Started​

Basic Text Entry​

To add text content:

  1. Click into the editor area to place your cursor
  2. Start typing your content
  3. The editor behaves like a standard word processor, allowing you to select, cut, copy, and paste text

Key Features Available​

The Strapi WYSIWYG editor provides several formatting options:

  • Text formatting: Bold, italic, underline
  • Lists: Bulleted and numbered lists
  • Headings: Multiple heading levels for content structure
  • Links: Hyperlinks to external URLs and internal pages
  • Rich text styling: Various text formatting options

Note: While the editor shows additional formatting tools, only the features covered in this guide are fully supported on the front-end website.

Working with Lists​

Lists are essential for organizing information clearly and making content more scannable for readers.

Creating Bulleted Lists​

Bulleted lists (also called unordered lists) are perfect for items that don't need to be in a specific order:

  1. Click the "Bulleted List" icon (represented by three dots with lines next to them) in the toolbar
  2. Start typing your first list item
  3. Press Enter to create a new list item automatically
  4. Continue adding items as needed
  5. Press Enter twice to exit the list and return to normal text

Best Practices for Bulleted Lists:

  • Keep list items concise and parallel in structure
  • Use lists for 3 or more related items

Creating Numbered Lists​

Numbered lists (also called ordered lists) are ideal when the sequence or priority of items matters:

  1. Click the "Numbered List" icon (represented by "1, 2" with lines next to them) in the toolbar
  2. Start typing your first list item
  3. Press Enter to create the next numbered item automatically
  4. Continue adding items in sequence
  5. Press Enter twice to exit the list and return to normal text

When to Use Numbered Lists:

  • Step-by-step instructions or procedures
  • Rankings or priority orders
  • Sequential processes or workflows
  • Items that need to be referenced by number

Content Structure and Headings​

Proper heading structure is crucial for content organization, SEO, and accessibility. It helps readers scan your content and understand the hierarchy of information.

Using Headings Effectively​

Headings create a logical structure for your content and improve readability:

  1. Select the text you want to format as a heading
  2. Click the "Format" dropdown in the toolbar
  3. Choose the appropriate heading level:
    • Heading 1: Main page title (use sparingly, typically once per page)
    • Heading 2: Major section headers
    • Heading 3: Subsection headers under Heading 2
    • Heading 4: Minor subsections (if needed)

Heading Hierarchy Best Practices​

  • Follow sequential order: Don't skip heading levels (e.g., don't jump from H1 to H3)
  • Use headings for structure, not styling: Choose headings based on content hierarchy, not appearance
  • Keep headings descriptive: Make them informative and scannable
  • Limit H1 usage: Typically use only one H1 per page
  • Be consistent: Use similar phrasing and structure across headings

Font Size Considerations​

While the editor allows various font sizes, the heading structure automatically provides appropriate sizing. Focus on semantic meaning rather than visual appearance, as the website's CSS will handle the final presentation.

Links are essential for connecting your content to other pages, resources, and external websites. They improve user experience and help with website navigation.

Adding Links to Text​

To create a hyperlink:

  1. Select the text you want to turn into a clickable link
  2. Click the "Link" icon (represented by a chain link symbol) in the toolbar
  3. In the dialog box that appears, enter the URL you want to link to
  4. Click "Save" to create the link

Choose Descriptive Link Text:

  • ✅ Good: "Read our complete privacy policy"
  • ❌ Poor: "Click here" or "Read more"

URL Guidelines:

  • External links: Use complete URLs (e.g., https://www.example.com)
  • Internal links: Use relative paths when possible
  • Email links: Use mailto: prefix (e.g., mailto:contact@example.com)
  • Phone links: Use tel: prefix (e.g., tel:+1234567890)

Accessibility Considerations:

  • Make link text meaningful out of context
  • Avoid using URLs as link text unless necessary
  • All external links will open in a new tab by default and have a small external link icon next to them

After creating links:

  • Test that they work correctly
  • Verify external links open properly
  • Check that internal links navigate to the correct pages
  • Ensure email and phone links function as expected

Text Formatting​

Bold Text​

Bold formatting helps emphasize important information and makes key points stand out to readers.

To make text bold:

  1. Select the text you want to emphasize
  2. Click the "Bold" icon (represented by an uppercase 'B') in the toolbar
  3. The selected text will immediately become bold

Alternative Method:

  • Use the keyboard shortcut Ctrl+B (Windows) or Cmd+B (Mac)

When to Use Bold Text​

Effective Uses:

  • Key terms and important concepts
  • Headings within lists or sections
  • Critical warnings or notices
  • Product names or important features

Avoid Overuse:

  • Don't bold entire paragraphs
  • Use sparingly to maintain impact
  • Consider headings instead of bold for major sections

Additional Formatting Options​

While the Strapi WYSIWYG editor displays various formatting tools in the toolbar, only the formatting options covered in this guide (headings, lists, links, and bold text) are fully supported and will display correctly on the front-end website.

Unsupported Features​

The following formatting options may appear in the editor but are not recommended for use as they may not display properly on the website:

  • Italic text
  • Underline
  • Text colors
  • Background colors
  • Font family changes
  • Advanced text alignment

Troubleshooting Common Issues​

  • Links not working: Verify URLs are complete and correctly formatted
  • Internal links broken: Check that target pages exist and paths are correct

Formatting Issues​

  • Bold text not appearing: Ensure you're using the Bold button, not other formatting
  • Lists not formatting correctly: Use the proper list buttons rather than manual numbering

Content Display Problems​

  • Text appearing differently: Stick to supported formatting options only
  • Spacing issues: Use proper paragraph breaks rather than multiple line breaks