WYSIWYG Editor
WYSIWYG editor
The WYSIWYG (what you see is what you get) editor is the primary tool for creating content in your digital workplace. Using this tool, you can create and format text, add images, embed videos, and use HTML code throughout your digital workplace.
The WYSIWYG editor is a tool that everyone in your digital workplace will use at some point. The following actions require the editor:
- Creating content on Channels within the digital workplace
- Posting Comments and Replies
- Editing the digital workplace's Footer
- Populating the HTML Widget
- Editing a Space's Header and Footer
WYSIWYG tools
The WYSIWYG editor uses either a full toolbar that contains all editing tools, or a compact toolbar that contains a subset of editing tools. You will encounter the full toolbar when creating content and the compact toolbar when replying to content or creating microblog posts. When working on long articles, the toolbar will snap to the top of the editor window as you scroll down the page.
Not all available tools are displayed at the same time. Clicking More Text Options (
), More Paragraph Options (
), More Rich Text Options (
), or More Misc (
) reveals a secondary toolbar with additional tools specific to that tool type.
Text tools
| Action | Shortcut | Compact Toolbar | Usage |
|---|---|---|---|
 Bold | Ctrl + B | ✔ | Bold the selected text. Clicking when no text is selected causes subsequently entered text to be bold. Click again to turn this style off. |
 Italic | Ctrl + I | ✔ | Italicize the selected text. Clicking when no text is selected causes subsequently entered text to be italic. Click again to turn this style off. |
 Underline | Ctrl + U | ✔ | Underline the selected text. Clicking when no text is selected causes subsequently entered text to be underlined. Click again to turn this style off. |
 Font Size | — | ✔ | Change the font size of the selected text. Selecting a font size when no text is selected causes subsequently entered text to use the selected font size. Available font sizes range from 8px to 48px. |
 Text Color | — | ✔ | Change the text color of the selected text. Selecting a text color when no text is selected causes subsequently entered text to use the selected color. Select from up to 42 pre-configured colors (27 default and 15 custom), or enter a valid hex color code. Select the Clear Formating option from the color swatch to revert to the default text color (typically black). |
 Background Color | — | ✖ | Change the background color of the selected text. Selecting a background color when no text is selected causes subsequently entered text to use the selected color. Select from up to 42 pre-configured colors (27 default and 15 custom), or enter a valid hex color code. Select the Clear Formating option from the color swatch to revert to the default background color(typically black). |
 Clear Formatting | — | ✖ | Remove all text styles from the selected text. Clicking when no text is selected turns any enabled text styles off. |
 Strikethrough | Ctrl + S | ✖ | Cross out the selected text. Clicking when no text is selected causes subsequently entered text to have a strike through it. Click again to turn this style off. |
 Subscript | — | ✖ | Shrink and lower the selected text below the normal text line. Clicking when no text is selected causes subsequently entered text to be in subscript. Click again to turn this style off. |
 Superscript | — | ✖ | Shrink and raise the selected text below the normal text line. Clicking when no text is selected causes subsequently entered text to be in superscript. Click again to turn this style off. |
 More Text Options | — | ✖ | Not all available text tools are displayed at the same time, click this to view additional options. |
Paragraph tools
| Action | Shortcut | Compact Toolbar | Usage |
|---|---|---|---|
 Paragraph Format | Ctrl + P | ✖ | Apply a paragraph style to the selected text. Selecting a paragraph style when no text is selected causes subsequently entered text to use the selected style. Paragraph styles include Normal, Heading 1, Heading 2, Heading 3, Heading 4, and Code. |
 Align Left | — | ✖ | Align the selected text to the left side of the editor. Selecting Align Left when no text is selected causes subsequently entered text to be left-aligned. |
 Align Center | — | ✖ | Align the selected text to the horizontal center of the editor. Selecting Align Center when no text is selected causes subsequently entered text to be center-aligned. |
 Align Right | — | ✖ | Align the selected text to the left side of the editor. Selecting Align Left when no text is selected causes subsequently entered text to be left-aligned. |
 Align Justify | — | ✖ | Add spacing between the words of the selected text so that the edges of each line are aligned with the left and right margins. Selecting Align Justify when no text is selected causes subsequently entered text to be justified. |
 Ordered List | — | ✔ | Create a numbered list out of the selected text. Selecting when no text is selected causes subsequently entered text to be bulleted. Pressing enter once creates a new bullet while pressing enter twice turns off this style. Click the dropdown menu for additional appearance options. Available options include Default, Lower Alpha, Lower Greek. Lower Roman, Upper Alpha, and Upper Roman. |
 Unordered List | — | ✔ | Create a bulleted list out of the selected text. Selecting when no text is selected causes subsequently entered text to be bulleted. Pressing enter once creates a new bullet while pressing enter twice turns off this style. Click the dropdown menu for additional appearance options. Available options include Default, Circle, Disc, Square. |
 Line Height / Line Spacing | — | ✖ | Change the height of each line in the selected text. Selecting when no text is selected causes subsequently entered text to have a height according to the selected value. Height options include Default, Single, 1.15, 1.5, and Double. |
 Increase Indent | Ctrl + ] | ✖ | Shift the selected text 20px to the right. Selecting when no text is selected causes subsequently entered text to be indented. |
 Decrease Indent | Ctrl + [ | ✖ | Shift the selected text 20px to the left. Selecting when no text is selected causes subsequently entered text to be indented. |
 More Paragraph Options | — | ✖ | Not all available paragraph tools are displayed at the same time, click this to view additional options. |
Rich text tools
| Action | Shortcut | Compact Toolbar | Usage |
|---|---|---|---|
 Insert Table | — | ✖ | Insert a table into the editor. |
 Insert Link | Ctrl + K | ✔ | |
 Insert Image | Ctrl + P | ✔ | Insert an image into the editor. Not available in Broadcasts. |
 Embed URL | — | ✖ | Insert graphical links from popular content providers. Links added this way are presented in the editor as graphical cards. For more information about which providers are supported, see Providers. |
 GIPHY | — | ✔ | Insert a gif into the editor. The provided window gives the ability to search and select appropriate gifs from GIPHY. The GIPHY function can be enabled/disabled by Workplace and Enterprise Administrators from the Global Settings page. Not available in Broadcasts. |
 Insert Video | — | ✔ | Insert a video into the editor. Not available in Broadcasts. |
 Emoticons | — | ✔ | Insert emoticons into the editor. Emoticons are grouped into the following categories: Smileys & People, Animals & Nature, Food & Drink, Activities, Travel & Places, Objects, Symbols, and flags. Not available in Broadcasts. |
 Special Characters | — | ✖ | Insert special characters into the editor. Select from the provided groupings: Latin, Greek, Cyrillic, Punctuation, Currency, Arrows, Math, and Misc. |
 Insert Horizontal Line | — | ✖ | Insert a horizontal line that spans the entire width of the WYSIWYG editor. |
 More Rich Text Options | — | ✖ | Not all available rich text tools are displayed at the same time, click this to view additional options. |
General tools
| Action | Shortcut | Compact Toolbar | Usage |
|---|---|---|---|
 Undo | Ctrl + Z | ✖ | Remove the most recent change made within the editor. This action can be performed multiple times. Note: This option will only effect changes made during the current editing session. |
| Ctrl + Y | ✖ | Reapply the most recent change made within the editor. This action can be performed multiple times. Note: This option will only effect changes made during the current editing session. |
  Fullscreen | — | ✔ | Expand the editor to take up the entire browser window. Clicking this tool again will return the editor to its normal size. |
 Code View | — | ✔ | View the editor's content in raw HTML. While in this view, you can only work with the HTML code of the content. To return to the normal editor view, select the Code View tool again. |
 More general options | — | ✔ | Not all available options are displayed at the same time, click this to view additional options. |
RedoActions and workflows
Common actions and workflows include:
Additional keyboard shortcuts
| Shortcut | Usage |
|---|---|
Ctrl + C | Copies the selection to the clipboard. |
| Ctrl + X | Cuts the selection from the editor to the clipboard. |
| Ctrl + V | Pastes the clipboard content into the editor. |
| Ctrl + A | Select all content in the editor. |
- 8,219 views
- 0 previews
- 42 versions
- 0 comments
- 1 follower
- Updated By:
- Jesse Langstaff
- November 4, 2021
- Posted By:
- Matthew Seabrook
- September 4, 2017
- Versions:
- v.42
0 Comments