Rich Text Editor

Brightspot’s rich-text editor provides tools for adding special features to a text field. The special features include formatting (such as boldface or italics), inserting images and videos, adding hyperlinks, and tracked changes. You can paste content from Microsoft Word or Google Docs directly into the rich-text editor.

The following sections describe the features available in Brightspot’s default rich-text editor. Your version of Brightspot may have different features.

Text Formatting

The following table lists the text formatting you can apply with the default rich-text toolbar.

Button Name Description Example
format_bold Boldface Applies boldface to selected text. The cow jumped over the moon.
format_italic Italic Applies italic to selected text. The cow jumped under the moon.
format_underline Underline Applies underline to selected text. The cow jumped around the moon.
format_strikethrough Strikethrough Applies strikethrough to selected text. The cow jumped through the moon.
vertical_align_top Superscript Applies superscript to selected text. The cow jumped on top of the moon.
vertical_align_bottom Subscript Applies subscript to selected text. The cow jumped over everything except the moon.
format_clear Clear Removes formatting from selected text. The cow jumped over the moon.

HTML Markup

The following table lists the HTML effects you can apply with the default rich-text toolbar.

Button Name Description Example
link Link Inserts hyperlink over selected text. Nobody delivers content like <a href=”http://www.brightspot.com”>Brightspot</a>.
code Raw HTML Opens editor to enter HTML code. Aliens <b>Demand</b> Submission!
HTML HTML Mode Displays contents of editing area in HTML code. Click again to return to the rich-text editor. Aliens <b>Demand</b> Submission!

Lists

The following table lists the type of lists you can create with the default rich-text editor.

Button Name Description Example
format_list_bulleted Bulleted list Applies bullets to selected paragraphs.
  • Roses are red
  • Violets are blue
  • Most poems rhyme
  • But not this one
format_list_numbered Numbered list Applies numbering to selected paragraphs.
  1. Close water main.
  2. Disassemble faucet.
  3. Accept limitations.
  4. Call plumber.

Text Alignment

The following table lists the alignment you can apply with the default rich-text editor.

Button Name Description Example
format_align_left Left alignment Left-aligns text within its container. Text looking for alignment.
format_align_center Center alignment Centers text within its container.
Text looking for alignment.
format_align_right Right alignment Right-aligns text within its container.
Text looking for alignment.

Copy Editing

The following table lists the copy editing tools available with the default rich-text editor.

Button Name Description Example
Track Changes Start tracking changes. Added text appears with a green background; deleted text appears with a pink background with strikethrough.
For my wedding, I want something old, something newa honeymoon in Tahiti.
check Accept change. Accepts a change. For my wedding, I want a honeymoon in Tahiti.
close Reject change. Rejects a change. For my wedding, I want something old, something new.
visibility Preview changes. Provides a preview of your text as if you accept all changes. For my wedding, I want a honeymoon in Tahiti.
comment Add comment. Adds a comment. Are you sure about this? Aliens abducted to Area 51!
close Delete comment. Deletes a comment. Aliens abducted to Area 51!
more_horiz Comment collapse. With the cursor inside the comment, collapses the comment to an ellipsis. Aliens abducted to Area 51!

Tables

The following table lists the actions available for working with tables.

Button Description
border_all Opens a widget for adding a table.
Up Moves the table up one line in the editing area.
Down Moves the table down one line in the editing area.
Remove Temporarily removes the entire table.
Restore Restores a temporarily removed table.
Remove Completely Permanently removes a table.

In addition, you can copy/paste tables into the editing area from spreadsheet applications such as Microsoft Excel and Google Sheets.

You edit a table by clicking in one of the cells and then selecting from the popup menu.

../../../_images/edit-table-options.png

The following table describes each of the menu options. The available options change depending on the cell you select.

Item Description
Edit Cell Opens a widget for adding content to the cell. This widget is itself a rich-text editor, so you can use it to add text, formatting, graphics, and videos depending on your version of Brightspot.
Clear Cell Removes contents of cell.
Add Row Above Creates a new row above the cell. The new row will have the same number of columns as the current row.
Add Row Below Creates a new row below the cell. The new row will have the same number of columns as the current row.
Delete Row Deletes the row containing the cell.
Add Column Right Creates a new column to the right of the cell. The new column will have the same number of rows as the current column.
Add Column Left Creates a new column to the left of the cell. The new column will have the same number of rows as the current column.
Delete Column Deletes the column containing the cell.

Media

The following table lists buttons for inserting media into the default rich-text editor.

Button Description
image Inserts an image.
collections Inserts a gallery.
ondemand_video Inserts a video or a playlist of videos.

Keyboard Shortcuts

The following table lists some of the keyboard shortcuts available in the editing area. If you need a keyboard shortcut that’s not listed, contact your Brightspot developer to add it.

Shortcut Description
Select
Ctrl-A (Windows), ⌘-A (OS X) Select all.
Move
Up, Ctrl-P (OS X) Move cursor up.
Down, Ctrl-N (OS X) Move cursor down.
Left, Ctrl-B (OS X) Move cursor left.
Right, Ctrl-F (OS X) Move cursor right.
⌥-B (OS X) Move word left.
⌥-F (OS X) Move word right.
PageUp, ⇧-Ctrl-V (OS X) Move cursor up one screen.
PageDown, Ctrl-V (OS X) Move cursor down one screen.
Ctrl-Home (Windows), ⌘-Home (OS X), ⌘-Up (OS X) Move cursor to start of editing area.
Ctrl-End (Windows), ⌘-End (OS X), ⌘-Down (OS X) Move cursor to end of editing area.
Alt-Left (Windows), Ctrl-A (OS X) Move cursor to beginning of paragraph.
Home Move to first non-black character in paragraph; if already at that character, move to beginning of paragraph.
Alt-Right (Windows), Ctrl-E (OS X) Move cursor to end of paragraph.
⌘-Right (OS X) Move cursor to end of line.
⌘-Left (OS X) Move cursor to beginning of line.
Delete
Delete, Ctrl-D (OS X) Delete character right.
⌘-Delete (OS X) Delete to beginning of line.
Backspace, Ctrl-H (OS X) Delete character left.
⌥-Delete (OS X) Delete word left.
⌥-D (OS X) Delete word right.
Find
Ctrl-F (Windows), ⌘-F (OS X) Find.
Ctrl-G (Windows), ⌘-G (OS X) Find next.
Shift-Ctrl-G (Windows), ⌘-⇧-G (OS X) Find previous.
Shift-Ctrl-F (Windows), ⌘-⌥-F (OS X) Replace.
Shift-Ctrl-R (Windows), ⇧-⌘-⌥-F (OS X) Replace all.
Special
Ctrl-] (Windows), ⌘-] (OS X) Indent first line of paragraph.
Ctrl-T (OS X) Transpose characters at cursor.
Ctrl-K Insert hyperlink.
Ctrl-Z (Windows), ⌘-Z (OS X) Undo last change.
Ctrl-S, ⌘-S Save.

Linking to External Content

You can insert links to external content in the rich-text editor, such as to social networking posts or to any other resource on the internet. Brightspot displays the external content as a preview in the rich-text editor and in the published version.

  1. On the rich-text editor’s toolbar, click one of the following: Embed, Facebook, Instagram, or Tweet. The Edit widget appears.

    ../../../_images/external-content-widget.png
  2. In the URL field, paste the URL of the external content.

  3. Fill in other fields as available. (The Maximum Width and Maximum Height fields, if available, provide the maximal dimensions for the external content’s preview.)

  4. Under Overrides, enter formatting overrides as available for your version of Brightspot.

  5. Click Save & Close. You return to the rich-text editor, and the preview of the external content appears.

  6. Using the toolbar buttons listed below, modify the external content as required.

Button Description
Edit Opens the Edit Embed widget to modify the external content.
Move up Moves the preview up one line in the editing area.
Move down Moves the preview down one line in the editing area.
Remove Removes the external content.

See also:

Rich Text