Content Editor Basics

April 5th, 2012
The Content Editor, aka MCE (mini content editor) or WYSIWYG (an acronym for “what you see is what you get,” pronounced: wizzy-wig,) is one of the tools you will use most frequently. It is important to understand how it works and I will supply some nifty tips and tricks that will allow you to add content easily and quickly and, most importantly, to make the content look the way you want.

Step-By-Step Instructions

1.

Log in to the CMS.

2.

Navigate to the page you would like to edit. For this tutorial, I am going to edit the Attend SVA/Undergraduate page.

Click “Edit Content.”

3.

The Basics tab contains the Content Editor.

Please note: This tutorial will cover the basics of the content editor. There are some options (like the ones I’ve highlighted in red) in the Content Editor that are for more advanced users. While we have failsafes in place to avoid errors on the site when using the Content Editor, please do no use these options unless you have been specifically trained to do so by the VAP.

4.

The MCE (mini content editor) has an intuitive interface that is very similar to Microsoft Word. You can add styling to text, bullets, numbered lists, links and much more.

The top left buttons will add bold, italics, underline* and strikethrough. All you have to do is highlight the text you would like to apply the styling to and then click the desired button. And just like with Word, you can use shortcut keys as you are typing (for example: Command + B, Ctrl + B for Mac and PC, respectively).

* For site consistency, we are asking that you do NOT use underline, as it is considered a hyperlink convention.

5.

On the next row of buttons down, the first three buttons from the left are Cut, Copy and Paste. It is recommended that you use shortcut keys to perform this action, however if you prefer the click method, be advised these buttons do not work in Firefox or Chrome. The shortcut keys for Cut, Copy and Paste are listed below:

Mac
Cut:      command + X
Copy:   command + C
Paste:  command + V

PC
Cut:       ctrl + X
Copy:    ctrl + C
Paste:   ctrl + V

6.

Fourth form the left is “Paste as Plain Text.” When you copy and paste text from other sources such as Word or another website, you often copy the text formatting as well, such as bold, italics and color. There is also some invisible formatting that gets passed over. This can cause abnormal results.

If, after you have copied text to your clipboard, you click “Paste as Plain Text,” you will be notified that you are in “Paste as Plain Text Mode.” Click OK. Now when you paste the text into the Content Editor, it will be stripped of all formatting.

7.

Fifth from the left is the “Paste from Word” option. For those who like to work in MS Word, this allows you to write and format all of your copy in Word and then copy and paste into the MCE and keep all the formatting you had applied to the text in Word.

When you click the “Paste from Word” button,  a dialog box will pop up with an empty text area. Just paste your copy from Word into this box and MCE will do all of the work. This will keep all of your specialized formatting from Word and translates it beautifully for the web.

8.

Just to the right of the “Paste form Word” button is the listing options. You can create a bulleted or ordered list by highlighting the text you would like to list, and click the desired button.

9.

The next pair of buttons are for creating and removing links. If you would like to link text to another webpage, simply highlight the text you would like to make into a link and click “Insert/Edit Link” button.

You will see a dialog box prompting you for the URL, target, title and class. You only need to worry about the first two. Leave all other fields in this box alone.

Add the desired URL (Make sure you include http://).

To learn more about which Target to use, see Website Specifications.

Click Insert when you have added the correct info in these two fields.

The text you highlighted will now change color and be underlined.

In order to remove the link, highlight the link text and click “Unlink” button.

10.

Skipping over a few, find the button on the second row, second from the righ that looks like a white eraser. This button removes all formatting in text that has already been placed in the editor. If you have copy that is not rendering correctly on the public side, this is a nice option to have. If you would like to strip all formatting rules to the text, highlight the text you would like to strip and click “Remove Formatting.” Now you do not have to worry about some of those pesky invisible formatting rules.

11.

That covers many of the basics of the Content Editor. One feature that is commonly used, but not covered in this tutorial, is tables. Skip on over to Create a Table to learn how to tackle tables.

 

 

Extra Tips & Tricks

Here are a few shortcuts to get a desired result.

1.

By default, when you hit enter/return on your keyboard, the Content Editor creates a new paragraph style. You may want to return to the line directly under the current one rather than starting a new paragraph. The shortcut is to hold Shift and hit Enter/Return.

Page Break  =  Shift + Enter/Return

2.

You can move blocks of text by highlighting the block you would like to move, the click and drag it to its desired location. This helps if you want to shuffle paragraphs around.