Using the WYSIWYG Editor

All the Icons, All the Possibilities

Notice to the right side of the Toolbox pictures above, you will find two tabs: Visual and HTML. For all instructional purposes, you will only be using the Visual view of the editing process, but please be aware that you can access HTML if you ever need to do so. Let’s being by becoming familiar with all of the icons and then individual uses.

Expanding Your Toolbar, AKA “The Kitchen Sink” Button

Before you even begin to get acquainted with your toolbar and icons, you need to first locate the “Kitchen Sink” button. In the image below, it appears inside the red circle.

Star Kitchen Sink Button

Select the "Kitchen Sink" icon.

Once you have clicked the “Kitchen Sink” icon, the toolbar should expand to look like the image below. Notice the addition of the entire middle row.

Kitchen Sink

Once you have selected the "Kitchen Sink" button, your toolbar will expand to include the entire middle row.

**Note: Once you expand your toolbar by selecting the “Kitchen Sink” icon, your toolbar will remain this way each time you edit your blog.**

Upload/Insert Icons:

Add Media Icon

Right above where the Toolbox begins, you will find Upload/Insert: followed by four icons. By hovering over each icon, their purpose will appear. From left to right, the functions of each icon are as such:

  • Add Image add an image
  • Picture 8 add video
  • Add Audio add audio
  • Add Media add media

Top Row Icon Functions

  • Bold allows you to Bold your text.
  • Picture 15 allows you to Italicize your text.
  • Picture 16 allows you to Strike Through your text.
  • Picture 17 creates an unordered (or bulleted) list.
  • Ordered List creates an ordered (or numbered) list.
  • Quote signifies a long quote. When you highlight text and select this button, it will indent it.
  • Left aligns text left.
  • Center alights text to the center.
  • Right aligns text right.
  • Link creates a link. When you highlight text and select the link button, you will be prompted to insert the URL of the site you wish to link to. Once you do that, the selected text will then become a link to another page.
  • Unlink this will remove a link on selected text.
  • Insert More Tag this is called the Insert More Tag (Alt+Shift+T)  and can only be used for posts. When you are writing a post, you can place this icon anywhere in your text. Everything before the icon will appear in your blogs home screen with a link to the full text. Everything after the icon will not appear on the home page, only once the view chooses the “Keep Reading” link.
  • Language allows you to choose what language you would like the site to spell check.
  • Full Screen selecting this icon allows you to edit in a full screen.
  • Kitchen Sink Icon you will recall that this button is called the “Kitchen Sink” and allows you to view and access the middle row of icons.

Middle Row Icon Functions

Remember that the middle row is accessible only after you click the “Kitchen Sink” icon mentioned above. Once you have selected this icon, the middle row will always appear when you edit.

  • Format this icon will allow you to change the format of your text based on the particular template of your blog. Here is where you can select which heading you need (you will never use heading 1 or heading 2 in your blog. Those headings are already in use for your blog name and page or post title.)
  • Underline this icon will underline your text, but should not be used in your blog if at all possible. Underline text signifies a link. If you need to stress a word, use bold or italics.
  • Justify this will fully justify any text. Again, this icon should not be used on the web.
  • Font Color this button is used change the color of fonts, but will be disabled for blogs within the PSU system to ensure consistency. You will be able to change to different headings via the Format icon (the first icon in the Middle Row Icon list).
  • Plain Text this will paste something you have copied in plain text. The pasted text will appear without any formatting (no bold, underline, or italics).
  • Paste with Formatting this will paste something you have copied exactly as it appears in Word. It will not keep the font, but it will keep anything that is bold, italicized, or underlined.
  • Remove Formatting selecting this button when text is highlighted will remove any formatting. It will change “hello” or “hello” to “hello”.
  • Symbols this icon allows you to insert special characters or symbols.
  • Outdent this will outdent text, but should not be used in the context of your blog.
  • Indent this will indent text.
  • Undo undo the last change you made. You can undo as many times as you need.
  • Redo this will redo any changes you have undone.
  • Helpthis will direct you to a set of instructions to using different parts of the toolbar.

Bottom Row Icon Functions

These icons you will find helpful when you want to add video to your post or page. Each icon bears the symbol of a certain page, like YouTube or Google, and will allow you to directly embed video from those sites into your blog.

Add Video Icons

**Note: You can also embed video into your blog by selecting the Add Video button in the Add Media list located above your toolbar.**

HTML vs. The Visual Editor

If you are interested in becoming more acquainted with the HTML editor, this video will give you a brief tour.

Please enable Javascript and Flash to view this VideoPress video.

Featured in Plymouth Magazine

Example Image

A Life Unfolds in Letters

Norton Bagley’s life reads like the script for a Hollywood movie …

Example Image

Beyond Granite: The Museum of the White Mountains Takes on STEM

As American students and workers fall behind their counterparts around the world in the science and technology fields, educators and policy makers have stressed the importance of strengthening our attention to STEM—science, technology, engineering, and mathematics. Exhibition curator Sarah Garlick writes about the connections between earth science, adventure, and the process of learning STEM in […]

Example Image

In Good Hands

No one would question Athletic Director John Clark ’71, ’73G if he said he was ready to retire after serving PSU for more than four decades …