Rich Text Editor

Contentrain provides a built-in WYSIWYG (What You See Is What You Get) Rich Text editor that allows content creators to visually compose and format content without writing any markup. The Rich Text editor is available for any content field that uses the Richtext component type in its content model.

Overview

The Rich Text editor gives you a familiar word-processor-like experience directly within the Contentrain dashboard. When you create or edit content that includes a Richtext field, the editor loads automatically, presenting a formatting toolbar and a live editing area where your content appears exactly as it will be rendered.

Key benefits of the Rich Text editor include:

• Visual editing -- Format content in real time without needing to know HTML or Markdown syntax.
• Immediate preview -- See exactly how your content will look as you type and apply formatting.
• Accessible to all team members -- Non-technical content creators can produce well-structured content independently.
• Consistent output -- The editor generates clean, structured content that integrates seamlessly with your frontend framework.

Editor Interface

When you open a content entry that contains a Richtext field, the editor interface consists of two main areas:

Formatting Toolbar

The toolbar sits at the top of the editor and provides quick-access buttons for all available formatting options. Each button applies formatting to the currently selected text or inserts a new element at the cursor position. Hovering over a toolbar button displays a tooltip describing its function.

Editing Area

Below the toolbar is the editing area where you write and format your content. This area behaves like a standard text editor -- you can type, select text, copy, paste, and use keyboard shortcuts. Content is rendered visually in real time, so headings appear larger, bold text appears bold, and so on.

Formatting Options

The Rich Text editor supports a wide range of formatting capabilities to help you create well-structured content.

Text Formatting

Basic text formatting options are available through the toolbar or keyboard shortcuts:

• Bold -- Emphasize important text. Select the text and click the B button or press Ctrl+B (Windows/Linux) or Cmd+B (macOS).
• Italic -- Add emphasis with italicized text. Select the text and click the I button or press Ctrl+I / Cmd+I.
• Underline -- Underline text for additional emphasis. Select the text and click the U button or press Ctrl+U / Cmd+U.
• Strikethrough -- Mark text as deleted or no longer relevant by drawing a line through it. Select the text and click the strikethrough button.

Headings

Structure your content with heading levels. The editor supports multiple heading levels (H1 through H6) that help organize content into logical sections. Select the text you want to convert into a heading and choose the appropriate heading level from the toolbar dropdown.

Using headings properly is important for both readability and SEO. A well-structured heading hierarchy makes content easier to scan and helps search engines understand the structure of your page.

Lists

The editor supports two types of lists:

• Bulleted (Unordered) Lists -- Use these for items that do not follow a specific sequence. Click the bulleted list button in the toolbar to start a new list, or convert existing lines into list items.
• Numbered (Ordered) Lists -- Use these for step-by-step instructions or items that follow a specific order. Click the numbered list button to create an ordered list.

You can nest lists by indenting items to create sub-lists within a parent list.

Links

Insert hyperlinks to connect your content to other pages or external resources. To add a link:

1. Select the text you want to turn into a link.
2. Click the link button in the toolbar.
3. Enter the destination URL in the dialog that appears.
4. Confirm to apply the link.

You can also edit or remove existing links by clicking on the linked text and using the link options that appear.

Images

Embed images directly into your Rich Text content. To insert an image:

1. Place your cursor where you want the image to appear.
2. Click the image button in the toolbar.
3. Select an image from the Assets Manager or provide an image URL.

Images inserted through the Rich Text editor are managed alongside your other project assets. For more information on managing images and other media, see the Asset Management documentation.

Code Blocks

Display code snippets with proper formatting using code blocks. Code blocks preserve whitespace and use a monospaced font, making them suitable for sharing code examples, configuration snippets, or terminal commands. Click the code block button in the toolbar and type or paste your code within the block.

Blockquotes

Highlight quotations or important callouts using blockquotes. Select the text and click the blockquote button in the toolbar to apply blockquote formatting. Blockquotes are visually indented and styled differently from regular text, making them stand out in your content.

Tables

Organize data in a structured format using tables. To insert a table:

1. Click the table button in the toolbar.
2. Specify the number of rows and columns.
3. Fill in the table cells with your content.

You can add or remove rows and columns after creating the table, and adjust the content within each cell as needed.

Rich Text vs Markdown

Contentrain supports both Rich Text and Markdown editors for content creation. The choice between them depends on the content model configuration and the preferences of your team.

Feature	Rich Text Editor	Markdown Editor
Editing style	Visual, WYSIWYG	Syntax-based, text-first
Best for	Content creators who prefer visual formatting	Developers and writers familiar with Markdown syntax
Learning curve	Low -- no syntax knowledge required	Moderate -- requires Markdown syntax knowledge
Content output	Structured rich text	Markdown (.md / .mdx) files
Field type	Richtext component	Markdown component
Formatting control	Toolbar-driven	Full control through syntax
Portability	Tied to the CMS rendering	Portable across any Markdown-compatible tool

When to use Rich Text:

• Your content team includes non-technical members who need a visual editing experience.
• The content requires frequent use of images, tables, and complex formatting.
• You want to reduce the risk of formatting errors from manual syntax.

When to use Markdown:

• Your team is comfortable with Markdown syntax and prefers a text-first workflow.
• You need content files that are portable and can be edited outside the CMS.
• Your project uses a static site generator or framework with native Markdown support.

For more information about the Markdown editor, see the Markdown Editor documentation.

Tips for Content Creators

Follow these best practices to get the most out of the Rich Text editor:

• Use headings to structure your content. Break long content into sections with descriptive headings. This improves readability and helps with SEO.
• Keep formatting consistent. Stick to a consistent style for headings, lists, and emphasis throughout your content. Avoid mixing bold and italic for the same purpose.
• Use lists for scannable content. When presenting multiple items, steps, or options, use bulleted or numbered lists instead of long paragraphs.
• Add meaningful link text. Instead of "click here," use descriptive text that tells readers what they will find at the link destination.
• Optimize images before inserting. Use appropriately sized and compressed images to keep your pages loading quickly. Upload images through the Assets Manager for centralized management.
• Preview your content. Review the visual output in the editor before publishing to ensure that formatting, images, and links appear as intended.
• Use blockquotes and code blocks purposefully. Reserve blockquotes for actual quotations or important callouts. Use code blocks only for code or technical content.
• Do not over-format. Excessive use of bold, italic, and underline makes content harder to read. Use emphasis sparingly and intentionally.

For visual walkthroughs and video tutorials covering the Rich Text editor and other Contentrain features, visit the Contentrain Walkthroughs page.