WYSIWYG Editor

The "what you see is what you get" (WYSIWYG) editor one of the most common fields seen in almost all Stacks features. Used for most "body" or "description" fields, this is a simple tool that allows content creators the ability to add or modify material in a way that closely resembles the final result that will be published and visible to your end-users or patrons.

Topics covered in this article include:

• Text editing
  • Adding headings
  • Pasting content into the field
  • Text alignment
  • Adding block quotes
• Adding files, images, and other media
  • Adding new files or those previously uploaded to Stacks
  • Uploading new image files
• Hyperlinking text and images
• Embedding videos
• Source functions
• Additional help

 Tip! Depending on the size of your browser window, some toolbar icons may not be displayed due to space. Click the show more items icon  to see all toolbar options.

Text Editing

Various text editing options are available via this field, including common functions like the ability to bold, italicize, underline, strikethrough, subscript and superscript.

Other options also allow creators to add headings and modify the text alignment. You can also add block quotes which will indent, italicize, and make the selected text slightly larger than the main "paragraph" text. 

Adding headings

1. Select the desired text, then click the heading icon and select the appropriate header option from the drop-down

Pasting content into the editor

A quick way to add content is to copy it from other sources and paste it directly into the editor, which does support this functionality. 

The Remove Format button only clears basic text styles like bold, italics, or underline, but it does not strip out all inline styles or special code. Pasting as plain text ensures your content comes in completely clean, just as if you typed it directly in the editor.

To change the text alignment

1. Select the text to adjust
2. Click the text alignment icon and select the desired alignment option from the drop-down

To add a block quote

1. Enter the text into the WYSIWYG editor
2. Select or highlight the text to be used as the block quote
3. Click the block quote icon
   1. If needed, click the icon again to remove the block quote formatting

Adding Files, Images, and other Media

When adding images, documents, or other media to the WYSIWYG editor, there are two buttons that could be used depending on the file type and whether it has already been uploaded to Stacks.

• The insert media icon () can be used to both upload new files (images, documents, or other media), as well as select from all files previously uploaded to Stacks
  • New files uploaded via this button will also be added to the Dashboard > Files area allowing them be selected in other Stacks features/content types also
• The upload image icon () is used only to upload new image files directly to the WYSIWYG editor
  • Image files added via this button will not be added to the Dashboard > Files

Adding new files or those previously uploaded to Stacks

This first option describes adding all file types, including: documents, images, and other media.

1. Click the Insert media icon
2. Search for and select from the previously uploaded files; OR
3. To upload new files, select the media type from the menu on the left and browse to the new file. Once found, click the file and follow the prompts to complete the upload
4. Click the Insert selected button to add the file to the WYSIWYG editor

Tip! When adding document files (like .pdf or .docx as example), the WYSIWYG editor will display the original file name for the document once its added (eg. my_document.pdf). If you wish to display something other than the file name, browse to the file in the Dashboard, once found right click on the title and select Copy link address. In the WYSIWYG editor, highlight the text to be hyperlinked, then click the link icon () and paste the URL to the file in the displayed field.

Uploading new image files

This option only applies to adding new image files. 

1. Click the Upload image icon
2. Browse to the image file on your device and select it
3. An image toolbar will appear
   1. If the image is decorative and does not require alternative text, click the toggle to indicate it is decorative. Otherwise, enter the Alternative text which is descriptive text that replaces the image when it can't be displayed or is not accessible to users, such as those using screen readers
4. Click the green checkmark icon to save the settings

Hyperlinking Text and Images

To hyperlink text

1. Highlight the text to hyperlink
2. Click the link icon ()in the toolbar
   1. Tip! When an added image is clicked, a small toolbar with the 'link' icon will appear just above or just below the image
3. In the field that opens, enter or paste the url, then click the checkmark icon

To hyperlink images

1. Click the existing image to hyperlink (or follow the steps above to add new images)
2. A toolbar will appear either just above or just below the image, click the link icon () in this mini toolbar
3. In the field that appears, enter or paste the url, then click the checkmark icon

Embedding Videos

Videos can be quickly embedded in this field with the click of a button. To embed videos

1. Click the URL embed icon
2. Enter or paste the video url in the field
3. Click the Embed button

Source Functions

For more advanced control over the content being added, content creators can transform the WYSIWYG editor to an HTML code-based editor. This provides administrators with advanced control, including the ability to:

• Write source code in HTML
• Paste Third-Party widget code
• Paste Embed code for content such as videos from YouTube or Vimeo
• Apply additional formatting to text including changing font sizes and colors

While pasting code into the editor is possible, it is recommended to build content directly in the WYSIWYG editor. When pasting is required, we recommend you do so as plain text, using Control/Command + Shift + V to avoid bringing in unwanted formatting or code. Pasting from external sources like Word or other websites may interfere with intended styles and behavior.

Tip! To access the source HTML code editor, you may need to click the show more items icon icon in the top right corner of the WYSIWYG editor toolbar, then click Source.

Additional Help

For more help and tips on different HTML and CSS code that can be used to enhance your content, click the About text formats link under the WYSWYG editor.