Skip to main content

Rich-text editor

Brightspot's rich-text editor provides tools for formatting text (such as boldface or italics), inserting images, videos, and hyperlinks, and many other features available in traditional word processors.

As the width of the rich-text editor decreases, many of the options are nested under . The width may change due to preview being open, screen resolution, screen size, etc.

5.0-RTE-more-menu
Note

Brightspot provides full support for the UTF-8 encoding standard. If you are publishing in a character set that conforms to this standard, editors can work natively in Brightspot, and visitors interact naturally with your published pages.

Formatting text

Brightspot's rich-text editor carries a number of formatting options that editors may use in their content.

To format text:

  1. Enter or select the text to be formatted.

  2. Click desired formatting from the toolbar:

    • Bold
    • Italic
    • Underline
    • Strikethrough
    • Superscript
    • Subscript
    • Clear Formatting

Aligning text

You can choose simple text alignment in the rich-text editor.

To align text:

  1. Enter or select the text to be aligned.

  2. Click desired alignment from the toolbar:

    • Left
    • Center
    • Right

Adding lists

You can add bulleted or numbered lists in the rich-text editor.

To add lists:

  1. Enter or select the text to be set in a list.

  2. Click desired list type from the toolbar:

    • Bulleted list
    • Numbered list

For numbered lists, you can reset the numbering if needed.

To reset numbering:

  1. Double-click any list item's number in the list.
  2. In the Reset Numbering popup, enter a number in the text field. Brightspot resets the list number to the number you enter.
  3. Click Save.

Indenting text

You can increase or decrease indentation in the rich-text editor.

To indent text:

  1. Enter or select the text to be set in a list.

  2. Click desired indentation from the toolbar:

    • Add indent
    • Remove indent

You can add hyperlinks to the rich-text editor.

To add a hyperlink:

  1. Enter or select the text you want to hyperlink.

  2. Click .

  3. Under Link, do one of the following:

    • Internal–Search for and link to an existing asset. Under the Advanced tab, select the link target and add an anchor link if desired.
    • External–Add an external URL. Under the Advanced tab, select the link target.
    • Site Search–Search for and link to an existing site search.
  4. Click Save & Close.

Embedding enhancements

Note

Enhancements are content types you can insert into the rich-text editor. Because they are content types, you can learn more about out-of-the-box enhancement options in the Content Types guide; however, this topic does cover enhancement controls, like moving enhancements around and aligning them.

You can embed a variety of enhancements into the rich-text editor, from images, to videos, to entire modules.

Inline vs. shared enhancements

Similar to other inline (one-off) and shared assets in Brightspot, you can choose to build an enhancement from scratch (inline) or pull in an existing one (shared).

TypeDescription
InlineYou build the enhancement from scratch in the rich-text editor. Once built, it only exists in this asset and cannot be shared to other assets. Because it lives in this asset, the asset itself needs to be saved for your work to be preserved.
SharedYou pull in an existing enhancement (either an asset or a module) to use as an enhancement. The enhancement is already built and does not require additional changes before adding it to the rich-text editor.

Moving enhancements around

At times, you may need to re-position enhancements. You can move enhancements around in two ways:

  • Cut and paste the enhancement.
  • Click the enhancement to display the editing toolbar, and then click one of the buttons described in the following table.
ButtonDescription
Moves the enhancement up one paragraph.
Moves the enhancement down one paragraph.
Turns on drag-and-drop. After clicking the button, move the mouse to the new position, and then click to place the enhancement.

Enhancement alignment

At the bottom of its configuration popup, each enhancement contains alignment options. The table below shows a sample of where the enhancement is placed within the text based on the alignment option chosen.

AlignmentExample
Left Alignment
5.0-gallery-left-aligned
Center Alignment - Contained
5.0-gallery-centre-aligned
Right Alignment
5.0-gallery-right-alignment

Dragging and dropping enhancements

You can upload new shared media into the rich-text editor by dragging and dropping.

Adding inline code

You can add inline code in the rich-text editor.

To add inline code:

  1. Enter or select the text to be set in inline code.
  2. Click in the toolbar.

Adding headers

You can add headers of various sizes in the rich-text editor:

To add headers:

  1. Enter or select the text to be set as a header.
  2. Click Format , then select a heading size (H2, H3, H4, H5). You may also add a horizontal divider by selecting HR.

Adding HTML or iframe embeds

You can add HTML or iframe embeds in the rich-text editor.

To add HTML or iframe embeds:

  1. Click inside of the rich-text editor where you want to add the HTML or iframe embed.

  2. Click , and then select either HTML or Iframe.

  3. In the Shared field, do one of the following:

    • Search for and select an existing HTML or iframe embed.

    • Click Create New to add a new one.

      • HTML–Add an Internal Name and then insert your code into the Raw HTML field.
      • Iframe–Add an Internal Name and a URL, then define the iframe's height and width in pixels.
  4. Click Save & Close.

Adding quotes

You can add quotes to better display and highlight them in the rich-text editor.

To add quotes:

  1. Enter or select the text to be set in a quote.
  2. Click .
  3. Attribute the quote in the Attribution field.
  4. Click Save & Close.

Adding snippets

You can add snippets–small pieces of modular content–in the rich-text editor.

To add snippets:

  1. Click inside of the rich-text editor where you want to add the snippet.
  2. Click .
  3. Search for and select the desired snippet, or create a new one. See Snippet.
  4. From the Variant list, select a variant if desired.
  5. Click Save & Close.

Adding tables

You can add tables in the rich-text editor.

ActionInstructions
Add table1. Click inside of the rich-text editor where you want the table to appear.
2. Click , and draw a table on the model.
Add row1. Place the cursor inside the table where you want to add a row.
2. Click , and select Add Row Above or Add Row Below.
Delete row1. Place the cursor inside the row you want to delete.
2. Click , and select Delete Row.
Add column1. Place the cursor inside the table where you want to add a column.
2. Click , and select Add Column Left or Add Column Right.
Delete column1. Place the cursor inside the column you want to delete.
2. Click , and select Delete Column.
Merge cells1. Click and drag to select the cells you want to merge.
2. Click , and select Merge Cells.
Split cells1. Click in the cell you want to split. (The cell must be one that you previously merged.)
2. Click , and select Split Cell.

Custom keyboard

You can insert unicode characters using a virtual keyboard in the rich-text editor.

To use the custom keyboard:

  1. Click inside of the rich-text editor where you want the unicode character to appear.
  2. Click .
  3. Select a character from the keyboard.

To add characters to the custom keyboard, see Adding characters to the rich-text editor's virtual keyboard.

Track changes

The rich-text editor provides tools for managing changes and comments.

To toggle on track changes:

  • On the toolbar, toggle on Track Changes to see the track-changes toolbar. The toolbar includes the following options:

    • Accept Changes—Accepts the change your cursor is on.
    • Reject Changes—Rejects the change your cursor is on.
    • Accept All—Accepts all changes.
    • Reject All—Rejects all changes.
    • Preview—Previews the text with all changes accepted.

These controls are also available in full-screen editing mode.

Commenting

You may leave comments inside of the rich-text editor to add additional context or direction.

Adding comments

  1. Position the cursor where you want to place the comment. Ensure no text is selected.
  2. On the toolbar, click .
  3. Begin typing your comment.
  4. Click again to exit commenting mode.
tip

You can configure the rich-text editor to create comments from selected text. For details, see Enabling conversion from text to in-line comments.

Deleting comments

  1. Click inside the comment.
  2. On the toolbar, click .

Showing or hiding comments

  • On the toolbar, click .

Responding to comments

You can respond to an editor's comments in full-screen mode.

  1. Enter full-screen mode by clicking . All comments and tracked changes appear in the right rail.
  2. Click for the comment you want to respond to.
  3. Delete a response by clicking .

AI features

If you have the AI plugin, you can use Create with AI to generate content. See Using Create with AI

Find and replace

You can find and replace specific terms.

To find and replace:

  1. In the rich-text editor toolbar, click .

  2. Enter the term you want to find.

    • The term is highlighted throughout the rich-text editor.
    • The number of times that term is present is noted to the right of the search field. Click and to toggle through instances of the term. The currently selected instance is highlighted.
  3. Click to show the replace functionality.

  4. To add additional logic to what Brightspot finds, do the following:

    • Click Case Sensitive if you want Brightspot to only find case sensitive matches with the text you entered in the search field. For example, if you click Case Sensitive and enter graph in the search field, Brightspot only finds instances of graph (which might include polygraph and graphs, but not Graph).
    • Click Whole Word if you want Brightspot to only find the exact text you enter into the search field. For example, if you click Whole Word and enter graph in the search field, Brightspot only finds instances of graph (and not polygraph or graphs).
  5. To replace the selected term with another, enter a new term in the Replace with field. Once you enter a term in this field, the Replace and Replace All buttons become available.

  6. To replace the currently highlighted term, click Replace. To replace all occurrences of the original term, click Replace All.

Full-screen editing

You can expand the rich-text editor to your entire browser window.

To enter full-screen editing mode:

  • On the toolbar, click .

Keyboard shortcuts

The following table lists some of the keyboard shortcuts available in the editing area. (Your version of Brightspot may have different keyboard shortcuts.)

ActionShortcut (Windows)Shortcut (Mac)Shortcut (Linux)
Select
Select all.Ctrl-A⌘-ACtrl-A
Select one character to the right.Shift-Right⇧-RightShift-Right
Select one character to the left.Shift-Left⇧-LeftShift-Left
Select to the end of line.Shift-End⇧-Ctrl-RightShift-End
Select to beginning of line.Shift-Home⇧-Ctrl-LeftShift-Home
Select one line down.Shift-Down⇧-DownShift-Down
Select one line up.Shift-Up⇧-UpShift-Up
Select to end of editing area.Shift-Ctrl-End⇧-⌘-DownShift-Ctrl-End
Select to beginning of editing area.Shift-Ctrl-Home⇧-⌘-UpShift-Ctrl-Home
Select next word.Shift-Ctrl-Right⇧-⌥-RightShift-Ctrl-Right
Select previous word.Shift-Ctrl-Left⇧-⌥-LeftShift-Ctrl-Left
Select one page down.Shift-PageDown⇧-PageDown, ⇧-Fn-Down
Select one page up.Shift-PageUp⇧-PageUp, ⇧-Fn-Up
Move
Move cursor up.UpUp, Ctrl-PUp
Move cursor down.DownDown, Ctrl-NDown
Move cursor left.LeftLeft, Ctrl-BLeft
Move cursor right.RightRight, Ctrl-FRight
Move to beginning of paragraph.Ctrl-A
Move to end of paragraph.Ctrl-E
Move cursor one word to left.Ctrl-Left⌥-LeftCtrl-Left
Move cursor one word to right.Ctrl-Right⌥-RightCtrl-Right
Move cursor to beginning of editing area.Ctrl-Home⌘-UpCtrl-Home
Move cursor to end of editing area.Ctrl-End⌘-DownCtrl-End
Move cursor to end of line.End⌘-RightEnd
Move cursor to beginning of line.Home⌘-LeftHome
Scroll down one page.PageDownPageDown, Fn-Down
Scroll up one page.PageUpPageUp, Fn-Up
Delete
Delete beginning of line.⌘-DeleteCtrl-Shift-Backspace
Delete to end of line.Ctrl-Shift-Delete
Delete to the left.BackspaceDeleteBackspace
Delete to the right.DeleteCtrl-DDelete
Delete word to right.Ctrl-DeleteCtrl-Delete
Delete word to left.Ctrl-BackspaceCtrl-Backspace
Paragraph alignment
LeftCtrl-Alt-L⌘-⇧-LCtrl-Alt-L
CenterCtrl-Alt-E⌘-⇧-ECtrl-Alt-E
RightCtrl-Alt-R⌘-⇧-RCtrl-Alt-R
Text Formatting
BoldCtrl-B⌘-BCtrl-B
ItalicCtrl-I⌘-ICtrl-I
UnderlineCtrl-U⌘-UCtrl-U
StrikethroughCtrl-Alt-X⌘-⇧-XCtrl-Alt-X
SuperscriptCtrl-Shift--⌘-.Ctrl-Shift--
SubscriptCtrl-=⌘-,Ctrl-=
Clear character formattingCtrl-Space⌘-\Ctrl-Space
HyperlinkCtrl-K⌘-KCtrl-K
Lists
BulletsCtrl-Shift-8⌘-⇧-8Ctrl-Shift-8
NumbersCtrl-Shift-7⌘-⇧-7Ctrl-Shift-7
Demote list levelCtrl-]Ctrl-]
Promote list levelCtrl-[Ctrl-[
Line-break inside of listShift-EnterShift-Return
Find
Finds in editing areaCtrl-F⌘-FCtrl-F
Special
Type raw HTMLCtrl-Shift-CCtrl-⇧-CCtrl-Shift-C
Show keyboard with special charactersCtrl-Shift-K⌘-⇧-KCtrl-Shift-K
UndoCtrl-Z⌘-ZCtrl-Z
RedoCtrl-Y⌘-⇧-ZCtrl-Y
Enhancements
Pull quoteCtrl-Shift-QCtrl-Shift-Q
ImageCtrl-Shift-ICtrl-⇧-ICtrl-Shift-I
GalleryCtrl-Shift-GCtrl-⇧-GCtrl-Shift-G
PlaylistCtrl-Shift-PCtrl-⇧-PCtrl-Shift-P
VideoCtrl-Shift-VCtrl-⇧-VCtrl-Shift-V
ModuleCtrl-Shift-MCtrl-⇧-MCtrl-Shift-M
Collaboration
Toggle comment insertionCtrl-Shift-′Ctrl-⇧-′Ctrl-Shift-′