WYSIWYG Content Editor

WYSIWYG Editor

Pronounced "Wiz-e-whig", WYSIWYG stands for "What You See Is What You Get" and should be familiar to most internet users. The Sitemason WYSIWYG Editor provides a set of basic options for editing content.

wysiwyg.png

Similar to Word Processor

If you haven't been exposed to a WYSIWYG Editor before, it's quite straight forward, and very similar to a word processor. The primary difference is that you're editing for the web, and not for print. As such, the WYSIWYG generates HTML. At any time you can see the HTML you're creating by going to the Source button in the top left of the editor. Some finer points are discussed below.

Copying and Pasting

Copying and pasting content from other sources is a common method of entering content into your Sitemason website.  However, when copying and pasting from non-plain text sources such as another website or Microsoft Word, the styles from that source are maintained.  This causes a host of issues when those styles are presented through your website (with its own set of styles), ranging from malformed text to the content not showing up at all!  Every now and then, even more severe problems will occur, such as entire sections of your website not displaying properly.  The problems all stem from HTML and CSS in the source content.

The solution is simple: Sitemason's WYSIWYG editor includes a "Paste as Plain Text" function.  Simply tap this icon, then paste your content into the resulting window, then it will be inserted into the WYSIWIG editor.  This function will do its best to strip out any formatting that will cause problems in your website.  And, regardless of the source, it's generally a safer bet to use the Paste as Plain Text function instead of your browser's paste function.  You may have to re-format a few things still, but the result will be compatible with your website and will look as it should.

 

The "Paste as Plain Text" function's icon The "Paste as Plain Text" function's icon

Undo and Redo

 

Just like in other applications, you can also undo or redo changes you've made through the back and forward arrows. These can also be accessed by the standard keyboard shortcuts CMD+z and CMD+SHIFT+z respectively.

Bold, Italics, Underline, Strikethrough

These are the most basic of editing functions for any publishing platform and represented by the B, I, U, S icons.

Format

Format is a list of curated styles that manipulate the HTML and combine with your site's stylesheet to display styled content in a uniform manner. In most cases, your web developer will work with you to define the look of the output for a given style, but each has a browser defined default. For example, most browsers will display "Computer Code" in a block serif font like Courier New with a tab indention. Using these styles allows your site to maintain uniform consistency and avoid the hodge-podge that can result from trying to style content manually with colors, sizes, fonts, etc.

Lists and Blockquote

Lists are pretty standard for all word processing applications, and there's no exception with Sitemason. Create both ordered (numbered) and unordered (bulleted) lists.

Blockquote is an oft used style for citing inline quotations and are generally coupled with a uniform style defined by your web developer in your site's stylesheet.

Links

The ability to link to other pages is crucial to generating content for the web. To create a link, highlight the text you want to become a link, and then select the Link button, the chain-link icon on the left. Most often you will be linking to other pages on the web, so using the default Link Type "URL" and Protocol "HTTP" will be sufficient. Enter the URL of the link destination in the URL field. If linking to a page in your own site, it's best practice to use relative paths. A relative path starts with a forward slash ("/") after the domain name. So if you were linking to your History page in your About section, you might enter "/about/history" in the URL field.

To learn more about the options available in the WYSIWYG Links feature, continue reading the full Links tutorial.

Image Upload

Select the Image icon from the menu to upload an image from your computer. Go to the Upload tab to browse your local hard drive, then select "Send it to the Server" to upload your image to Sitemason. Once uploaded, you will be taken to the Image Info tab where you can manipulate your image by resizing, setting the alignment, or giving it some padding (HSpace, VSpace for horizontal and vertical, respectively).

Maximize View and HTML Source

If you'd like a little more room to edit your content, select the Maximize icon to go into Full Screen mode. Simply click the icon again to return to the standard Sitemason view.

If you are comfortable editing HTML yourself, you can always access the WYSIWYG generated HTML by going to the Source. If you are unfamiliar with HTML, it may not be for the faint of heart, but it is common to embed code from another website like YouTube which you will need to do through the Source.

Customizing Available Buttons

The standard set of WYSIWYG buttons represents the most commonly used options for the web, but if there are options needed that aren't represented by the standard set, contact your web developer, and they can enable other options like Justification, Specail Characters, or Flash uploads.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.