What is it?

The WYSIWYG (what you see is what you get) editor is the primary tool used to create 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. This core function of your digital workplace appears when creating articles and events, replying to content, and in HTML widgets.

The WYSIWYG editor is a core tool that everyone in your digital workplace will use at some point. The following actions require the use of the WYSIWYG:

• Add an Article
• Add an Event
• Add a Topic
• Editing the Footer
• Using the HTML Widget
• Writing Microblogs
• Writing Comments

Related Articles

• Recovering WYSIWYG Editor content

Main Toolbar

The WYSIWYG editor uses either a full toolbar or compact toolbar. The full toolbar is used when creating content, while the compact toolbar is used 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 the page is scrolled down. 

Action	Shortcut	Compact Toolbar	Usage
Bold	Ctrl + B	✔	Use to bold selected text. Clicking when no text is selected turns this style on; newly entered text will be bold. Click again to turn this style off.
Italic	Ctrl + I	✔	Use to italicize selected text. Clicking when no text is selected turns this style on; newly entered text will be italic. Click again to turn this style off.
Underline	Ctrl + U	✔	Use to underline selected text. Clicking when no text is selected turns this style on; newly entered text will be underlined. Click again to turn this style off.
Strikethrough	Ctrl + S	✖	Use to cross out the selected text. Clicking when no text is selected turns this style on; newly entered text will be crossed out. Click again to turn this style off.
Font Size	—	✔	Use to change the font size of the text. Select sizes from the provided menu, ranging from 8px - 48px.
Colors	—	✔	Use to change Text or Background color. Select colors from the provided palette, or enter a HEX Color value.
Clear Formatting	—	✖	Use to remove all styles from the selected text.
Paragraph Format	Ctrl + P	✖	Use to apply a style to the selected text. Select styles from the provided menu: Normal, Heading 1, Heading 2, Heading 3, Heading 4, and Code.
Align	—	✖	Use to change the alignment of text. Select from Left, Center, Right, and Justify. Note: Justify will stretch lines so that they are equal width.
Unordered List	—	✔	Use to create a bulleted list. Click the menu for additional appearance options: Default, Circle, Disc, Square.
Ordered List	—	✖	Use to create a numbered list. Click the menu for additional appearance options: Default, Lower Alpha, Lower Greek. Lower Roman, Upper Alpha, and Upper Roman.
Increase Indent	Ctrl + ]	✖	Use to move text 20px to the right.
Decrease Indent	Ctrl + [	✖	Use to move text 20px to the left.
Insert Table	—	✖	Use to insert a table into the editor. The number of columns and rows must be selected before the table will be inserted.
Insert Horizontal Line	—	✖	Use to add a horizontal line that spans the entire width of the WYSIWYG editor.
Emoticons	—	✔	Use to insert emoticons into the editor. Select from 56 different emoticons.
Special Characters	—	✖	Use to insert special characters into the editor. Select from the provided groupings: Latin, Greek, Cyrillic, Punctuation, Currency, Arrows, Math, and Misc.
Insert Link	Ctrl + K	✔	Use to insert a link to another URL. The display text can be entered directly, or created by selecting text and then clicking the Insert Link tool. Select "Open in new tab" to cause the linked URL to be opened in a new window when clicked. Webpage links can also be directly copied into the text editor.
Insert Image	Ctrl + P	✔	Use to insert an image into the editor. The provided window allows for dragging and dropping an image into it, selecting an image from the desktop, or entering the URL of where the image is located on the internet. Images can also be inserted by dragging and dropping them from the desktop into the editor. Most image types are supported, including: PNG, SVG, JPEG, and GIF.
GIPHY	—	✔	Use to 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.
Insert Video	—	✔	Use to insert a video into the editor. Enter the URL of where the image is located on the internet, or the embed code of the video. Which option to use depends on the video hosting service. YouTube and Vimeo allow you to copy the URL directly from your address bar, and provide an embed code. Videos uploaded into a digital workplace will have an embed code.
Embed URL	—	✖	Use to insert links from popular content providers. Links added this way are presented in the editor as graphical cards. Look here to find out what content providers are supported.
Undo	Ctrl + Z	✖	Use to remove the most recent change made within the editor. Can be performed multiple times. Note: This option will only effect changes made during the current editing session.
Redo	Ctrl + Y	✖	Use to reapply the most recent change made within the editor. Can be performed multiple times. Note: This option will only effect changes made during the current editing session.
Code View	—	✖	Use to 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.
Fullscreen	—	✖	Use to expand the editor to take up the entire browser window. Clicking this tool again will reduce the editor back to its normal size.

Working with inserted images

Once an image has been inserted, select it to display a list of editing options. The image editor provides the following tools:

• Replace: Swaps the current image with a new image maintaining any properties that have been configured by other image toolbar features.
• Align: Set how the image will be horizontally positioned. Selecting none will cause the image to inherit the alignment property of its current location. For example, when placing an image into a left aligned paragraph it will be also be left aligned if its Display is set to inline and Align value is set to None.
• Remove: Deletes the image from the editor. The editor’s undo feature can be used to restore the image if it was removed in error.
• Insert Link: Makes the image clickable, directing the user to the provided URL.
• Display: Determines how the image interacts with other objects in the editor. Use inline to allow text to wrap around an image.
• Style: Allows a border to be added to the image, and/or rounds the edges of the image.
• Alternate Text: Sets the alternate text used by the image, the default will be the file name. To improve accessibility set this text to something that meaningfully describes the image.
• Change Size: Set the width and height of the image. Aspect ratio will not be automatically adjusted when changing either of these properties.

Notes:

• Images will be automatically rotated, centered and resized to 300px when added to an article.
• Large images have smaller versions automatically generated for published content to reduce page load time.
• The maximum image size of images inserted directly into the editor is 10MB. This restriction does not apply to images inserted via url.

Working with inserted videos

If a video is not appearing Check to make sure that the video’s source URL attribute is directed at an https destination rather than an http one. Due to digital workplaces being https sites, they are unable to embed http content. Often, all you need to do to correct this is to add an “s” to the http. If the video host that you are embedding from does not support https, you will need to find an alternative host for the video. If you are able to download the video, do so, and then upload it to a folder in your digital workplace. Once uploaded you can generate a valid embed link.

Working with inserted tables

The Insert Table tool lets you create a table, up to a maximum size of 10x10. However, additional columns and rows can be added to the table after its creation. By default, the table will take up the entire width of the editor, but can be reduced by dragging the right-most edge of the table to the desired width. Tables are best used to display data, avoid using them to determine the layout of elements within your content.

Once a table has been inserted into your WYSIWYG editor, select a cell - or the entire table - to bring up a list of editing options. These options include: adding a table header, removing the table, adding/removing rows and columns, editing the table style, merging and splitting cells, setting cell background color, changing cell vertical and horizontal alignment, and cell styles.

Inserting audio and other files

The embed functionality of the video tool can also be used to insert documents and audio files that exist within a Folder Channel in the digital workplace using the file’s embed code.

How to add anchors

Using anchor tags to jump around a document was the solution for navigating large documents when HTML was first invented. The practice is now much less common, and as such our new updated content editor does not support this feature as a WYSIWIG function. However, it is still possible to code straight HTML to accomplish this.

Create an anchor

Edit the article and press the Code View button

Locate the desired document heading in the source code, and create the anchor before it.

Link to the anchor

To create a link to the anchor, add a link to the url, but add #anchorName                    to the end. ex, /support/knowledgebase/articles/wysiwigeditor#what-is-it

Reference

Here is a DIFF showing the document with and without anchors anchors