Last Updated 1/24/2019
This lesson shows you how to use the WYSIWYG editor to edit content, insert images & links, and embed videos, forms, snippets and other content.
WYSIWYG stands for What You See Is What You Get. It's a funny acronym that basically means rich text editor or HTML editor. Going forward, we'll simply call it the HTML editor.
Marketpath CMS uses a customized HTML editor that integrates seamlessly with all entities and objects within your site - e.g. inserting images and documents; creating links; inserting forms; and more.
The first thing to learn about is the HTML editor toolbar.
The toolbar has many standard actions that you may have seen in other editors, including Microsoft Word. It also has a few additional items that those editors won't have.
One important thing to note is that each toolbar item, when you mouse over it, has a tool tip that describes its function. This will help you more easily find the functions you need.
The toolbar will also collapse when your focus moves away each editable field. This is by design and helps keep your content more visually organized.
Each toolbar button is described below:
|Undo | Redo|
|Copy | Cut | Paste | Paste Text | Paste From Word|
|Bold | Italic | Underline|
|Formatting: Strikethrough | Superscript | Subscript|
|Text Color | Background Color|
|Unordered List | Ordered List | Blockquote|
|Indent | Outdent|
|Link | Unlink | Anchor|
|Insert Image | Insert Image Gallery|
Note: this only shows if a site has an Editor Stylesheet selected
Pasting content from an internal or external source is the same but you may want to pay attention to what your source is. In Marketpath CMS, you have three options:
- Paste - this is a general paste and will do minimal filtering of the pasted content
- Paste Text - pastes only text from the clipboard
- Paste from Word - retains most formatting but performs Word-specific filtering to remove elements that are web compatible.
Because of security concerns, modern browsers do not allow a triggered paste action (e.g. clicking the toolbar button or clicking in a context menu). If you try this, you'll get the popup dialog below:
Instead, you'll need to place your cursor where you want the pasted content and press Ctrl+V (Windows) or Cmd+V (Mac).
Even though the toolbar buttons throw an error, they still perform a function. If you select Paste Text or Paste from Word the editor will set the current paste mode to that selection. And then when you press Ctrl+V or Cmd+V it will paste and perform the selected filtering.
Linking & Unlinking
When you are ready to link to another page, document, image, email, or some external URL, select the text or image you want to link and then click the Link button. This will show the following dialog:
The default option is URI, which stands for Uniform Resource Identifier (or you may know it more commonly as URL). URI is used if you want to link to an external website. You can change that to Page, Document, Image, or Email. If you change it to Page, Document, or Image you'll need to select the page, document or image to which you want to link.
Note: we recommend adding a title for every link you add to cover any ADA compliance requirements.
Marketpath CMS provides advanced image management without requiring advanced technical knowledge. Every image inserted into an editable area is resized appropriately, on the fly, and cached with the CDN for faster downloading.
To insert an image, click the Insert Image button and the following dialog will appear.
To insert an image, select your image first, then add or update the Alt and Title tags (for ADA compliance and SEO benefits) and update the height and width, if necessary.
You can always edit the image after inserting it to adjust the height, width, and other properties.
You can choose your alignment, add margins (spacing on the sides of the image), and set a border width. All of these are optional.
You can choose to add a caption to the image by selecting Captioned. This will change how the image is inserted into the HTML editor by wrapping it in a figure element. Once inserted you can edit the caption text like any other text in the HTML editor.
Finally, if you have any Image Presets defined for your site, you can select one or more of those to apply to your image.
Inserting an Image Gallery
If you have an Image Gallery with your site and a gallery template setup, you can insert that gallery into the HTML editor. Click the Gallery button and then select the gallery you wish to insert.
You can also create a new gallery at this time, but be sure you already have a gallery template defined that will be used to render the gallery. If you're not sure or don't see any gallery templates, contact your agency or developer.
Once a gallery is inserted, you'll see a block that looks like this:
If you want to embed a video or some other media, click the Embed button. For some services, like YouTube, you can simply provide the link to the video. Marketpath uses an embed service that will automatically create the embed code for you. If the service does not support the provider of the link you pasted, then you'll need to paste the embed code yourself.
Clicking OK will insert the embed code into the HTML editor.
Inserting a Snippet
To insert a Snippet, click the Add/Modify button and click the Snippet item. This will prompt you to select an existing Snippet (or create a new one). After selecting the Snippet it will be shown in the editor similar to an Image Gallery. It will not render out the actual Snippet. Use the preview server to see it rendered.
Inserting a Form
To insert a Form, click the Add/Modify button and click the Form item. This will prompt you to select an existing Form (or create a new one). After selecting the Form it will be shown in the editor similar to an Image Gallery. It will not render out the complete Form. Use the preview server to see it rendered.
Inserting Liquid Markup
This feature is intended for advanced users who have completed the Marketpath CMS Developer Tutorial Series. Using it without experience or knowledge of Marketpath CMS developer best practices could have an adverse effect on your site.
Custom Site Styles
When your site was developed, the developers may have implemented custom site styles. If so, these can be seen in the Formatting Styles drop down. These will change depending on the type of element selected. Custom site styles can be defined for any number of HTML elements - paragraphs, links, images, etc.
To use these, simply select the text or image you want to style and then select the appropriate style.
Developers: see Using Stylesheets in the WYSIWYG Editor
Paragraph styles are used for heading tags (H1-H6), as well as Normal and Formatted tags. Each tag is a block level tag. Generally, you cannot have one block level tag inside another block level tag. For example, you cannot place an Heading 1 inside a Normal paragraph tag or vice-versa. Each tag is defined below.
|Heading||<h1>||This should be the page title. Only one Heading 1 tag should be used on each page|
|Heading 2 - 6||<h2> - <h6>||These are subordinate heading tags used for organizing and structuring a page.|
|Normal||<p>||Standard paragraph block tag|
|Normal (DIV)||<div>||Standard DIV block tag|
|Formatted||<pre>||Pre-formatted text which typically uses a mono-space font|
Let's work together to make our documentation as helpful as possible.