Skip to content
Optimizely CertificationOptimizely Certification Optimizely Certification

Edit Rich Text Content

⏱ 15 minutes beginner

Why rich text editing matters

Section titled “Why rich text editing matters”

Most content on a website lives inside rich text fields. If you cannot format that text effectively, your pages look flat, links break, and media sits in the wrong place. The CMS rich text editor (powered by TinyMCE) gives you word-processor-style tools directly in the browser so you can shape content without touching code.

Format text with the toolbar

Section titled “Format text with the toolbar”

The toolbar appears at the top of every rich text field when you click into it.

  1. Select the text you want to format.
  2. Choose a formatting option from the toolbar:
    • Bold (B) or Italic (I) for emphasis.
    • Heading dropdown to apply heading levels (H2 through H6).
    • Bulleted list or Numbered list for structured items.
    • Blockquote for quoted passages.
  3. Verify the formatting appears in the editor preview.

Apply custom styles

Section titled “Apply custom styles”

Your development team may define custom styles that match your site design. These appear in the Styles or Format dropdown.

  1. Select the text or block you want to style.
  2. Open the Styles or Format dropdown in the toolbar.
  3. Choose a custom style, such as “Intro Paragraph” or “Highlight Box.”
  4. Verify the style appears in the editor. Custom styles may not look exactly like the live site in the editor, but they render correctly on publish.

Use keyboard shortcuts

Section titled “Use keyboard shortcuts”

Keyboard shortcuts speed up formatting so you can keep your hands on the keyboard.

ActionWindowsMac
BoldCtrl+BCmd+B
ItalicCtrl+ICmd+I
UnderlineCtrl+UCmd+U
UndoCtrl+ZCmd+Z
RedoCtrl+YCmd+Shift+Z
Select allCtrl+ACmd+A
Insert linkCtrl+KCmd+K
Paste as plain textCtrl+Shift+VCmd+Shift+V

Paste content from Word

Section titled “Paste content from Word”

Copying from Microsoft Word often brings hidden formatting that breaks your page layout. The editor cleans up most of this automatically, but you can control what happens.

  1. Copy the text from Word.
  2. Click into the rich text field in the CMS.
  3. Paste using Ctrl+V (Windows) or Cmd+V (Mac). The editor strips most Word-specific formatting.
  4. If formatting looks wrong, undo the paste with Ctrl+Z, then paste again using Ctrl+Shift+V to insert plain text only.
  5. Reapply headings, bold, and lists using the toolbar.
  6. Verify the result by switching to the preview view.
Section titled “Add links”

Links connect your content to other pages, files, and external resources. The CMS supports five link types so you can link to almost anything.

Link to another page in the CMS

Section titled “Link to another page in the CMS”
  1. Select the text you want to turn into a link.
  2. Click the Insert/edit link button in the toolbar, or press Ctrl+K.
  3. In the link dialog, select the Page tab.
  4. Browse the content tree or search for the target page.
  5. Select the page and click OK.
  6. Verify the link appears highlighted in the editor.
Section titled “Link to a media file”
  1. Select the link text.
  2. Open the link dialog.
  3. Select the Media tab.
  4. Browse or search for the file (PDF, image, or document).
  5. Select the file and click OK.
Section titled “Link to an external URL”
  1. Select the link text.
  2. Open the link dialog.
  3. Select the External or URL tab.
  4. Enter the full URL, including https://.
  5. Choose whether the link opens in a new window.
  6. Click OK.
Section titled “Link to an email address”
  1. Select the link text.
  2. Open the link dialog.
  3. Select the Email tab.
  4. Enter the email address and an optional subject line.
  5. Click OK.

Link to an anchor on the same page

Section titled “Link to an anchor on the same page”
  1. First, create an anchor: place your cursor where you want the anchor, then select Insert anchor from the toolbar and give it a name.
  2. Select the text that should link to the anchor.
  3. Open the link dialog.
  4. Select the Anchor tab.
  5. Choose the anchor name from the dropdown.
  6. Click OK.

Use drag-and-drop linking

Section titled “Use drag-and-drop linking”

You can create links by dragging content directly into the rich text field.

  1. Open the content tree or media panel alongside the editor.
  2. Find the page or file you want to link.
  3. Drag it into the rich text field at the position where you want the link.
  4. The editor inserts a link using the page title or file name as the link text.
  5. Edit the link text if needed by clicking on it.

Insert media

Section titled “Insert media”

You can embed images and videos directly in rich text fields.

  1. Place your cursor where you want the media to appear.
  2. Click the Insert/edit image button in the toolbar.
  3. Browse the media library or search for the image.
  4. Select the image and set the Alt text (required for accessibility).
  5. Optionally set alignment and size.
  6. Click Insert.
  7. Verify the image appears at the correct position in the editor.

Common issues

Section titled “Common issues”
IssueCauseFix
Formatting looks different on the live siteEditor styles differ from site CSSThis is normal. Check the preview or published page for accuracy.
Pasted text has unexpected spacingHidden Word formatting survived cleanupUndo and paste as plain text (Ctrl+Shift+V), then reformat.
Link goes to the wrong pageSelected the wrong item in the content treeEdit the link and re-select the correct target.
Image does not displayMissing alt text or broken media referenceRe-insert the image and add alt text.
Toolbar buttons are missingYour role does not have permission for that featureContact your administrator to adjust editor permissions.