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.

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

WYSIWYG Basic Functions

Administrative users creating content via the editor will have access standard editing tools which includes:

• Text formatting (bold, italic, underline, headings, quotations, etc.)
• Text layout (indent, alignment, bullets, numbering)
• Text editing tools (copy, cut, paste)
• Hyperlinking text and images
• Image, audio, and video uploading
• Undo

Text Editing

As just mentioned, numerous text editing options are available, including common functions like the ability to bold, italicize, underline, strikethrough, subscript and superscript.

Other options also allow creators to add block quotes which will indent, italicize, and make the selected text slightly larger than the main "paragraph" text. Creators can also change the text alignment to left, center, right, or justified; and add headings if needed as well. 

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

To change the text alignment

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

To add a heading

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

To hyperlink text

1. Type the text you wish to display, then click the link icon and enter or paste the desired URL people will be directed to when the link is clicked.

Pasting Content into the editor

A quick way to add content is to paste copied content from other sources directly into the editor, which does support this functionality. However, when pasting content into the editor, it is strongly recommended to paste Plain Text (shortcut: Ctrl/Command + Shift + V) if you want to fully remove any styles, scripts, or hidden formatting that might come along from another source.

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.

Adding Images or other Media

When adding images, documents, or other media to the WYSIWYG editor, there are two options depending on the file type and whether it has already been uploaded to Stacks, these are the insert media or upload image options.

• 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 here will be added to the Dashboard > Files area and can be selected in other Stacks features/content types
• The upload image icon () is used only to upload new image files directly to the WYSIWYG editor
  • Image files added in this manner will not be added to the Dashboard > Files where previously uploaded files to Stacks reside

To add previously uploaded image, document, and other media files from your Stacks site

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.

To upload 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

WYSIWYG 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.

WYSIWYG 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.