Skip to: Main Content Search Main Navigation Audience Navigation
before_and_after1

CKEditor Documentation

New Features:

 

Old Features that have changed:

 

Copying and Pasting from Word:


Arguably one of the most desired new features, now you may copy and paste from Word while maintaining all formatting including bold, italics, bulleted lists and links without errors.

To do so, all you need to do is select the text from your Word document and paste (using Ctrl/Cmd+V) directly into the editor. You may also use the, “Paste from Word.” option located on the toolbar.

paste_from_word

Images will still need to be uploaded and inserted as you have done so in the past.

 

Maximize the Text Editor:


Another feature most requested is the ability to expand the text editor, visually, to make it easier to work on large pages of text. To do this, click on the “Maximize” button on the toolbar.

maximize

This will result in the text area to take up the entire editing space. To reverse this, simply click on the Maximize button again (now labeled “Minimize” upon hover).

 

Styles and Format:


This new Rich Text Editor will pull in available styles that exist on the page you are working on and also any styles that the web team adds. If the editor does not look like it is displaying formatting or styles correctly, please let us know so we can ensure everything looks as it will display on the page.

To apply a Style or Format, highlight the text you would like to change and click on one of the two drop downs labeled “Styles” or “Format”. “Format” will sometimes we replaced by the format selected for the text that is selected and can say “Normal”, “Heading 1”, and so on. Use Format to set the selected text to normal text size or to one of the header sizes. Please note, Format will apply to selected format to the entire line group of text.

Example:

style1

Highlighted “The Web Team”.

style2

Select “Heading 1”.

style3

Entire text group is set to Header 1 format. To prevent this from happening, add a line break after the text by pressing the Enter key after the text you want to become the header so it will only change that line of text:

style4

 

Embedding Video and other Media into your content:


To embed a YouTube video into your content, click on the “Embed Media Content” button on the toolbar:

embed

This will bring up the “Embed Media Content” dialog box. Enter the link to the sharable version of the video. For YouTube it will be the link found in the URL bar of your browser. If you are having trouble finding the proper URL for any other type of media you are embedding, please let the web team know and we will do our best to help you.

embed_dialog

There are several different resize options you can use if the video appears too small or too large in your content. Press OK when you are happy with what you have entered.

A box with the word “IFRAME” will be generated as a place holder. Previewing the media in the editor has been turned off to prevent load issues while editing and it also would make it impossible to move the embed or to edit it if you need to change the video or audio URL.

embed_example

To move the embedded media box, simply click and drag it to the location you wish for it to be. To change any options about the embedded media you may either double click on the box, or right click on it and select IFrame Properties.

The video or audio embedded media will display normally when the page is viewed after saving your changes.

Display Content Blocks for easy formatting:


To enable content blocks, click on the “Show Blocks” button on the toolbar:

show_blocks

You will then see outlines around the different parts of the content.

 

Easy Link Making:


To insert an Unregistered URL (one you enter in by hand and is not managed by CommonSpot) highlight the text you want to create the link out of and then click on the “Insert Link from CommonSpot” icon on the toolbar:

link

You can type your URL directly into the provided text field, or you can use the CommonSpot way and look for your page by clicking on “Get link from Server…”, but this feature will be explained in another section of this document.

link_dialog

You can also change the link text, just in case you accidentally selected too much or decide you want it to say something else. To change the link, right click on the link text and select “Edit Link”. If the link was set by using the “Get link from Server…” button, the URL field will be disabled since it is a managed link. To revert this, click on the red X to clear out the managed link and then add your own.

 

Inserting an Image:


Inserting an image is much the same as it was. Click on the portion of the editor you wish to add your image, and then click on the “Insert an Image from CommonSpot” button on the toolbar:

image

This will bring up the Add Image dialog where you can assign a link, the image, and the image attributes. Note: once you have added the image to the editor, you will have to use the “Insert Link from CommonSpot” dialog to add one at a later time or if you wish to use a CommonSpot managed link such as linking to an upload document.

Clicking on the “Set New Image…” button will bring up the familiar image selection dialog where you can chose an already existing image or upload a new one. Make sure to set the Alternate Image Text before you click Save if you want one applied.

This will add the image to the portion of the editor your cursor was located. To move the image, you may click and drag it around. To change anything about the image, click on it and then click the image button on the toolbar or right click the image and select “Edit Image” from the menu you are provided.

Inserting a Link via the CommonSpot dialog:


To insert a link, highlight the text you wish to become the link and then select the “Insert a Link from CommonSpot” button on the toolbar.

link

To retrieve a link from CommonSpot (or the Server) click on the “Get link from Server…” button in the dialog popup.

get_from_server

Use this functionality when linking to an uploaded file or if you wish to create a link that is managed by CommonSpot. A managed link will automatically update if the page you are linking to has been moved or deleted without you needing to remember to update it yourself. Once a Managed link from CommonSpot has been added, you can no longer update the URL field by hand. You may still change it by clicking on the “Get link from Server…” button, but if you wish to enter an unregistered link by hand, you will need to click on the red “X” button to clear everything out.

The text you highlighted will be displayed in the Link Text field you see on the dialog. You may change this if you accidentally selected too much of the text or wish to change the wording. This will replace the highlighted text in the editor when you click “OK”.

 

Inserting Jump Links:


To insert a jump link onto the page, select the text you wish to jump to and then click on the “Anchor” icon on the toolbar.

anchor

Type in an easy to remember link name, but making sure that it makes sense and is also unique. Once you are happy with it, click “OK” and you will see a flag icon appear around the text you selected.

anchor_example

You can then add a link to the content above this anchor point, or even from a different page using the CommonSpot link dialog by selecting the text you want to initiate the jump, clicking on the “Insert a Link from CommonSpot” button on the toolbar, click the “Get link from Server…” button, and then follow the instructions for setting up a bookmark. Inserting a bookmark manually will allow you to type in the Anchor Name you came up with before. 

 

Before and After:

before_and_after