The WYSIWYG Editor
Last updated
Last updated
The WYSWYG (What You See Is What You Get) editor allows you to create content with word processor-like formatting. You can type in text and apply styles to it (make it bold or italic, for example), insert links and images, and add other content and formatting, with all changes visible in the editor similar to how they will be shown on the front-end site.
The following list shows the icons for the formatting buttons in the WYSIWYG editor, and a brief description of their functions:
*Note* As you're typing text, pressing "Enter" starts a new paragraph, which leaves spacing between the previous paragraph and the new paragraph
You can add either web page links, or email links within your content by using the "Insert Hyperlink" button (shown above). Here are the options available:
For a web link, enter the full web address starting with https://
For an email link enter mailto: followed by the email address
By default, links will open in the same browser window. To have links open in a new browser window, select "Open link in new window".
The remove font styles icon will remove a lot of the styling that's carried over from an external text-editor, while still leaving styles that are compatible with the Base WYSIWYG. For instance, consider the following example:
If you highlight the text and select "remove font styles", you won't see any changes to the body copy, it will look identical:
This is because there weren't any inhibiting style tags buried in the HTML that may have been copied over from another editor.
Consider this example, where the text seems unnaturally small on the website in comparison to the surrounding text:
To troubleshoot, first we'll view the article in Base, and click on the "Code View" icon in the upper-right:
You'll notice there are some inline styles that were carried over from a previous text editor. To remove, highlight the text and select the "Remove Font Style" icon:
And now the text displays properly on the website:
