Rich text editor

The rich text editor is a primary tool for creating content in your digital workplace. It allows you to add or edit content, images, links, and other components without knowing how to code. The editor displays the content and any formatting as it would in the browser.

Details

Rich text editor menu and toolbars

The rich text editor uses either a full toolbar with a menu containing all editing tools or a compact toolbar with specific subsets of editing tools.

You can use the full rich text editor when: 

• Creating content, such as articles and wikis, within the digital workplace
• Populating the HTML content widget

You can use this compact rich text editor toolbar when: 

• Creating social posts in a social feed or the social feed widget
• Submitting feedback on a page

You can use this compact rich text editor toolbar when: 

• Submitting a comment on content

Due to the browser window or device size, not all available tools are displayed simultaneously. Occasionally, you may need to select Reveal or hide additional toolbar items to see all the toolbar options. 

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Export	—	✖	✖	Export the editor's content as a PDF file. The file is automatically downloaded to your device.

File Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Undo	Ctrl + Z	✔	✔	Remove the most recent change made within the editor. This action can be performed multiple times. This option will only affect changes made during the current editing session.
Redo	Ctrl + Y	✔	✔	Reapply the most recent change made within the editor. This action can be performed multiple times. This option will only affect changes made during the current editing session.
Cut	Ctrl + X	✖	✖	Cut the current selection from the editor to the clipboard.
Copy	Ctrl + C	✖	✖	Copy the current selection to the clipboard.
Paste	Ctrl + V	✖	✖	Paste the clipboard content into the editor.
Paste as text	—	✖	✖	Paste the clipboard content into the editor. All rich content is converted into plain text.
Select all	Ctrl + A	✖	✖	Select all content in the editor.
Find and replace	Ctrl + F	✖	✖	Search the content in the editor and optionally replace the text. To do so:  Select Edit in the menu and then Find and replace.  Enter the following:  Find: Word(s) to search for in the content.  Replace: Word(s) to replace found search terms.  Preferences: (Optional) Choose a search style of Match case, Find whole words only, or Find in selection.  Select Find to highlight all instances of the search terms. Use the Previous and Next buttons to navigate through the list.  Select Replace to change the current highlighted term or Replace all to replace all instances of the term in the content.

Edit Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Source code	—	✖	✖	View the editor's content in raw HTML. In this view, you can only work with the HTML code of the content.  Features include:  Copy code: Copy all the HTML content to the clipboard. Dark/light mode: Switch between the dark and light versions of the Source Code editor.  Increase / Decrease font size: Increase or decrease the font size of the HTML code in the Source Code editor.
Visual aids	—	✖	✖	Turn on to show visual indicators for invisible elements like anchors.
Show blocks	—	✖	✖	Turn on to show block components in the editor.

View Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Image	—	✔	✔	Insert an image into the text.  Select Insert in the menu and then Image.  Paste a URL into the Source field to insert an image via URL. Alternatively, to upload an image, select Browse files to find the image on your device.  Enter the following:  Accessibility: (Optional) If the image provides no context to the text, select the Image is decorative and do not enter an Alternative description.  Alternative description: (Optional) While optional, it is recommended that a brief description of the image be supplied so that screenreaders can describe it for accessibility.  Constrain proportions: (Optional) Select to prevent the image from warping when changing Width or Height. Width: (Optional) Edit the image's width in pixels. For example, 200px.  Height:(Optional) Edit the image's height in pixels. For example, 200px.  Select Save.  To edit the image once placed:  Select the image in the editor.  Use the following tools to adjust the image:  Rotate Counterclockwise: Rotate the image 90° counterclockwise.  Rotate Clockwise: Rotate the image 90° clockwise.  Flip Vertically: Flip the image on the horizontal axis.  Flip Horizontally: Flip the image on the vertical axis.  Edit image: Use the image editor's tools and select Save to modify the image.  Crop: Drag the handlebars to crop the visible portion of the image and select Apply.  Resize: Set the image's width and height. UseConstrain proportions to prevent visual warping, and select Apply. Orientation: Rotate or flip the image horizontally or vertically, and select Apply.  Brightness: Drag the slider to adjust the image's brightness and select Apply.  Sharpen: Drag the slider to sharpen the soft edges in the image to increase clarity, and select Apply.  Contrast: Drag the slider to adjust the brightness and darkness of the image's highlights and shadows, and select Apply.  Color levels: Drag the sliders to adjust the R(Red), G(Green), and B(Blue) color levels in the image, and select Apply. Gamma: Drag the slider to adjust the image's Gamma levels, and select Apply. Invert: Reverse the current colors of the image, and select Apply. Image options: Open the Image options to adjust accessibility and alternative text.
Link	Ctrl + K	✔	✔	Insert a URL link into the text.  Select Insert in the menu and then Link.  Input the following:  URL: Paste or type a URL into the field. Text to display: (Optional) Enter the text to be displayed in the editor. By default, this will display the entire URL address entered in the URL field.  Title: (Optional) Enter a contextual tooltip displayed when the user hovers over the link.  Open link in...: (Optional) Choose whether the link will open in a new or current window.  Select Save.
Media	—	✔	✔	Insert a video into the text.  To embed a video by URL:  Select Insert in the menu and then Media.  Select one of the following methods to insert a video: General tab: To embed a video by URL, enter the following:  Source: Paste or type a URL for a video into the field. Constrain proportions: (Optional) Select to prevent warping the video when changing the video's Width or Height. Width: (Optional) Edit the video's width in pixels. For example, 200px.  Height:(Optional) Edit the video's height in pixels. For example, 200px.  Embed tab: To embed the video by code, paste the embed code into the text box. Select Save.
Insert/edit iframe	—	✖	✖	Insert an iFrame into the editor to embed external content.  Select Insert in the menu and then Insert/edit iframe.  In the General tab, enter the following:  Source: Enter or paste the URL of the iframe. The iframe must come from a source that uses HTTPS.  Size: Choose a size option.  Inline Value: Set to define the iframe's Width and Height. Once selected, adjust the following:   Width: (Optional) Edit the iframe's width in pixels. For example, 200px.  Height:(Optional) Edit the iframe's height in pixels. For example, 200px.  Constrain proportions: (Optional) Select to prevent warping the iframe when changing the width or height. Responsive - 21x9 Responsive - 16x9 Responsive - 4x3 Responsive - 1x1 In the Advanced tab, enter the following:  Name: (Optional) Enter a name that JavaScript can reference.  Title: (Optional) Enter a title that JavaScript can reference the iframe to be displayed as a tooltip.  Long description URL: (Optional) Enter a URL to a location with a detailed description of the iframe.  Border: (Optional) Select Show iframe border to display a border around the iframe. Scrollbar: (Optional) Select Enable scrollbar to display scrollbars in the iframe. Select Save.
Code sample	—	✖	✖	Insert a code sample into the text that will be color-coded for increased readability depending on the code's programming language.  Select Insert in the menu and then Code sample.  Enter the following:  Language: Select from the following languages:  HTML/XML JavaScript CSS PHP Ruby Python Java C C# C++ Code View: Paste or type in the code snippet.  Select Save.
Table	—	✔	✔	Insert a table by selecting the number of rows and columns in the grid. The maximum selectable area is 10 rows by 10 columns.
Accordion	—	✖	✖	Insert a collapsible accordion area into the text. Select Insert in the menu and then Accordion. Enter the following in the rich text editor: Accordion Summary: Enter a summarized version of the content housed in the accordion.  Accordion Body: Enter the content that will be hidden when the accordion is turned on.  (Optional) Select Toggle Accordion to change whether the accordion is displayed minimized or expanded in the published content.
Special character	—	✔	✔	Insert special characters into the text. Special characters are grouped into the following categories: All Currency Text Quotations Mathematical Extended Latin Symbols Arrows Additionally, you can use the search box to find special characters by keyword.
Emojis	—	✔	✔	Insert emoticons into the text. Emojis are grouped into the following categories:  All Symbols People Animals and Nature Food and Drink Activity Travel and Places Objects Flags Additionally, use the search box to find emojis by keyword.
Horizontal line	—	✖	✖	Insert a horizontal line into the text that spans the entire width of the rich text editor.
Anchor	—	✖	✖	Insert an anchor to create a hyperlink location inside the text.  Select Insert in the menu and then Anchor. Enter an ID to identify the anchor when creating a hyperlink to the anchor. Select Save.
Insert footnote	—	✖	✖	Insert a footnote into the text. Footnotes will automatically be numbered as they are added.

Insert Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Bold	Ctrl + B	✔	✔	Bold the selected text. If no text is selected, any subsequently entered text will be bold.
Italic	Ctrl + I	✔	✔	Italicize the selected text. If no text is selected, any subsequently entered text will be italicized.
Underline	Ctrl + U	✔	✔	Underline the selected text. If no text is selected, any subsequently entered text will be underlined.
Strikethrough	—	✔	✔	Cross out the selected text. If no text is selected, any subsequently entered text will have a line through it.
Superscript	—	✖	✖	Shrink and raise the selected text below the standard text line. If no text is selected, any subsequently entered text will be superscript.
Subscript	—	✖	✖	Shrink and lower the selected text below the standard text line. If no text is selected, any subsequently entered text will be subscript.
Code	—	✖	✖	Wrap code inside a visual code block. If no text is selected, any subsequently entered text will be subscript.
Formats	—	✖	✖	Apply a format to the selected text in the editor. If no text is selected, any subsequently entered text will be formatted accordingly. Headings: Heading format options include:  Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Inline: Inline text format options include:  Bold Italic Underline Strikethrough Superscript Subscript Code Blocks: HTML block format options include:  Paragraph Blockquote Div Pre Align: Alignment format options include:  Left Right Center Justify
Blocks	—	✔	✔	Apply a block format to the selected text in the editor. If no text is selected, any subsequently entered text will be formatted accordingly. Block format options include:  Paragraph Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Preformatted
Align	—	✔	✔	Align the selected text in the editor. If no text is selected, any subsequently entered text will be aligned. Alignment options include:  Left align: Align the selected text to the left side of the editor.  Center align: Align the selected text to the horizontal center of the editor.  Right align: Align the selected text to the right side of the editor.  Justify align: Add spacing between the words of the selected text so that the edges of each line are aligned with the left and right margins.
Line Height	—	✔	✔	Change the height of each line in the selected text. If no text is selected, any subsequently entered text will have the selected value. Height options include: 1 1.1 1.2 1.3 1.4 (Default) 1.5 2
Text color	—	✖	✖	Change the text color of the selected text. If no text is selected, any subsequently entered text will use the selected color. Select Format in the menu and then Text color.  Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  (Optional) Select Remove color to remove the currently selected color. The color swatch will revert to the default text color (black).
Background color	—	✖	✖	Change the background color of the selected text. If no text is selected, any subsequently entered text will use the selected color. Select Format in the menu and then Background color.  Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code. (Optional) Select Remove color to remove the currently selected color.
Clear formatting	—	✔	✔	Remove all text styles from the selected text.

Format Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Accessibility checker	—	✔	✖	Check the editor's content for Web Content Accessibility Guidelines (WCAG) & US Section 508 accessibility issues.  Select Tools in the menu and then Accessibility checker. Or select Accessibility checker in the toolbar.  Use the Previous and Next buttons to navigate through the list of accessibility issues.  Review and implement suggested corrections. Select Repair to fix the issue or Ignore to move to the next issue.
Source Code	—	✖	✖	View the editor's content in raw HTML. In this view, you can only work with the HTML code of the content.  Features include:  Copy code: Copy all the HTML content to the clipboard. Dark/light mode: Switch between the dark and light versions of the Source Code editor.  Increase / Decrease font size: Increase or decrease the font size of the HTML code in the Source Code editor.
Typography	—	✖	✖	Enhance the editor's content by replacing common typewriter-style characters with their professional typesetter equivalents. Enhancements include adding and removing spaces, updating the placement of punctuation, and updating symbols and punctuation.   Select a language to use that language's enhancements. Options include:  Bulgarian Belarusian Catalan Czech Estonian Esperanto English (US) English (UK) Danish Dutch Finnish German Greek Hungarian Irish Italian Latvian Norwegian Polish Romanian Russian Slovak Slovenian Servian Spanish Swedish Turkish Ukrainian
Word count	—	✖	✖	View the number of words, characters with no spaces, and characters in the editor's content or selected text.

Tools Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
Table	—	✔	✔	Insert a table by selecting the number of rows and columns in the grid. The maximum selectable area is 10 rows by 10 columns.
Cell: Cell properties	—	✔	✔	Adjust the currently selected cell(s)'s visual properties within the table.   General options include: Width: Enter a width for the cell(s) / currently selected column in percentages. For example, 15%.  Height: Enter a height for the currently selected cell(s) in pixels. For example, 2px.  Cell type: Select the cell(s) type: Cell (Default) Header cell Scope: Select the cell(s) scope:  None (Default) Row Column Row group Column group Horizontal align:Select the cell(s) horizontal alignment:  None (Default) Left Center  Right Vertical align: Select the cell(s) vertical alignment:  None (Default) Top Middle Bottom Select the Advanced tab for advanced options including:  Border width: Enter a border width for the cell(s) in pixels. For example, 2px.  Border style: Select the cell(s) border style: Solid Dotted Dashed Double Groove Ridge Inset Outset None Hidden Border color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Background color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Once the cell(s) have been configured, select Save.
Cell: Merge cells	—	✔	✔	Merge the currently selected cells into one cell.
Cell: Split cell	—	✔	✔	Split the currently selected merged cell back into multiple cells. The number of cells depends on the number of columns the cell initially occupied.
Row: Insert row before	—	✔	✔	Insert a blank row before the currently selected row.
Row: Insert row after	—	✔	✔	Insert a blank row after the currently selected row.
Row: Delete row	—	✔	✔	Delete the currently selected row(s) from the table.
Row: Row properties	—	✔	✔	Adjust the currently selected row(s)'s visual properties within the table.   General options include:  Row type: Select the row(s) type: Header Body (Default) Footer Alignment: Select the row(s) alignment:  None (Default) Left Center  Right Height: Enter a height for the row(s) in pixels. For example, 100px.  Select the Advanced tab for advanced options including:  Border style:Select the row(s) border style:   Solid Dotted Dashed Double Groove Ridge Inset Outset None Hidden Border color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Background color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Once the row(s) have been configured, select Save.
Row: Cut row	—	✔	✔	Cut the currently selected row(s) from the table. To cut the row(s):  In the table, select cell(s) in the row(s). Select Cut row from the Table menu or toolbar.  To insert the row(s) into a different location: In the table, select cell(s) in the row(s). Select Paste row before or Paste row after from the Table menu or toolbar.
Row: Copy row	—	✔	✔	Copy the currently selected row(s) from the table. To copy the row(s):  In the table, select cell(s) in the row(s). Select Copy row from the Table menu or toolbar.  To insert the row(s) into a different location: In the table, select cell(s) in the row(s). Select Paste row before or Paste row after from the Table menu or toolbar.
Row: Paste row before	—	✔	✔	Insert a cut or copied row(s) before the currently selected row.  Use Cut row or Copy row from the Table menu or toolbar to cut or copy the row(s).
Row: Paste row after	—	✔	✔	Insert a cut or copied row(s) after the selected row.  Use Cut row or Copy row from the Table menu or toolbar to cut or copy the row(s).
Column: Insert column before	—	✔	✔	Insert a blank column before the currently selected column.
Column: Insert column after	—	✔	✔	Insert a blank column after the currently selected column.
Column: Delete column	—	✔	✔	Delete the currently selected column(s) from the table.
Column: Cut column	—	✔	✔	Cut the currently selected column(s) from the table. In the table, select cell(s) in the column(s). Select Cut column from the Table menu or toolbar.  To insert the column into a different location: In the table, select cell(s) in the column(s). Select Paste column before or Paste column after from the Table menu or toolbar.
Column: Copy column	—	✔	✔	Copy the currently selected column(s) from the table. In the table, select cell(s) in the column(s). Select Copy column from the Table menu or toolbar.  To insert the column(s) into a different location: In the table, select cell(s) in the column(s).  Select Paste column before or Paste column after from the Table menu or toolbar.
Column: Paste column before	—	✔	✔	Insert a cut or copied column(s) before the selected column.  Use Cut column or Copy column from the Table menu or toolbar to cut or copy the column(s).
Column: Paste column after	—	✔	✔	Insert a cut or copied column(s) after the selected column.  Use Cut column or Copy column from the Table menu or toolbar to cut or copy column(s).
Sort	—	✔	✔	Sort table contents by selecting one of the following options:  Sort table by column ascending: Sort the table in ascending order using the currently selected column. Sort table by column descending: Sort the table in descending order using the currently selected column. Advanced sort...: Configure the sort options and select Sort.  Sort by: Select to sort by Column or Row. Column: Select a column to sort by. Sort: Select the range of the sort from Column, Selection, or Table. Order: Select sort order from Ascending or Descending.
Table properties	—	✔	✔	Adjust the currently selected table's properties.   General options include:  Width: Enter a width for the table in percentages. For example, 80%.  Height: Enter a height for the table in pixels. For example, 100px.  Cell spacing: Enter the amount of space between cells in pixels. For example, 2px.  Cell padding: Enter the amount of space around cells in pixels. For example, 5px.  Border width: Enter a border width for the table in pixels. For example, 2px.  Show caption: Turn on to input a table header for accessibility purposes.  Alignment: Select the table's alignment.  None (Default) Left Center  Right Advanced options include:  Border style: Select the table's border style.  Solid Dotted Dashed Double Groove Ridge Inset Outset None Hidden Border color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Background color: Select a color from the Theme palette, or if Custom Color is turned on, select Custom Color to use the color picker or enter an RGB or hexadecimal color code.  Once the table has been configured, select Save to apply the changes.
Delete table	—	✔	✔	Delete the currently selected table.

Table Menu

Action	Shortcut	Full Toolbar	Compact Toolbar	Function
GIF	—	✔	✔	Insert a GIF into the text. Inserted GIFs are hosted by GIPHY and do not take up storage space in your digital workplace. Users who select an inserted GIF will be redirected to the GIFs page on GIPHY. Select GIF on the toolbar.  Enter a search term in the box and press Enter.  Select a GIF to insert it into the editor.  To edit the GIF once placed:  Select the GIF in the editor.  Use the following tools to adjust the image (Other tools may change the GIF to a non-animated GIF):  Resize: Drag and drop the corners of the GIF to resize the image.   Image options: Open the Image options on the toolbar to add alternative text, mark the GIF as decorative, or adjust the GIF's size. Select Save.
Checklist	—	✔	✖	Insert a checklist into the text at the current cursor location or select text to turn it into a checklist item.
Numbered list	—	✔	✖	Insert a numbered list into the text at the current cursor location or select text to turn it into a numbered list item.
Bullet list	—	✔	✖	Insert a bulleted list into the text at the current cursor location or select text to turn it into a bulleted list item.
Increase indent	—	✔	✔	Adjust the formatting of a paragraph or selected text by pushing it further to the right, creating an indentation.
Decrease indent	—	✔	✔	Adjust the formatting of a paragraph or selected text by pushing it further to the left, decreasing the size of an indentation.

Toolbar Buttons Not Included in a Menu

Related to

• site administrator
• widget
• social post
• article
• wiki
• glossary
• creator
• content creation