Follow

Text/Graphic Editor - Page Detail Tool

This tool allows you to add text, links, bulleted lists, horizontal lines, tables, graphics and widgets.

This tool is available in:

  • Primary pages  - Main Body & Right Side Bar
  • Faculty pages - Main Body & Right Side Bar

If an option does not apply to all page areas, multiple screen shots will be provided with descriptions of the differences.

Accessing the Main Body or Right Side Bar

Accessing the Main Body or Right Side Bar

In the Navigation Builder click on the Main Body or Right link of the page where the Text/Graphic Editor Tool will be displayed. If no Right Side tools are used, the Main Body  will use the full width of the page except for the left side navigation links. When tools are added to the Right Side all tools in the Main Body will automatically resize to optimally fit the smaller width of the Main Body area.

Adding the Text/Graphic Editor tool to the Main Body of a page

Adding the Text/Graphic Editor tool to the Main Body of a page
  1. Choose the Text/Graphic Editor from the Add Tool to this page drop down list.
  2. Click the Add button.

Adding a Text/Graphic Editor tool to the Right Side of a page

Adding a Text/Graphic Editor tool to the Right Side of a page
  1. Choose the Text/Graphic Editor from the Add Tool to this page drop down list.
  2. Click the Add button.

Formats of the Text/Graphic Editor

Formats of the Text/Graphic Editor

Primary Main Body and Faculty Main Body Format of Text/Graphic Editor - The Main Body T/G Editors have more options for displaying graphics, but do not have the I-Frame option found in the Primary Right Side T/G Editor.

Faculty Right Side Format of Text/Graphic Editor - Has limited graphic capabilities and no I-Frame option.

Primary Right Side Format of Text/Graphic Editor  - Has the  limited graphic options of the Faculty Right Side T/G Editor. Here an I-Frame can be added to allow for scrolling text and yet keep the text area from becoming too tall. The I-Frame can also be use display a public URL from another application. Some browsers do not work well with I-Frames. If you choose to add an I-Frame be sure to view the page in different browsers to see if the I-Frame will display the way you want it to.

The Text Editor Options

The Text Editor Options

The screen shots are using the Primary Right Side Text/Graphic Editor. All the options are available in each Text/Graphic editor tool, and in the same order, but may not appear on the same line.

  1. Source: Click on this button see the HTML view of your copy. More advanced Web site administrators can use this to work with the HTML code. Click this button again to go back to regular text view. Widgets can be added to a web page by clicking the "Source" icon, pasting
  2. Preview: By clicking on this, this page will open in a new browser window.
  3. Print: This will print the contents entered in the editor.
  4. Cut: You can also use use Ctrl-X.
  5. Copy: You can also use Ctrl-C.
  6. Paste: You can also use Ctrl-V (Not recommended: the best results are obtained when using the Paste as plain text clipboard.)
  7. Paste as plain text: (Recommended when ever you paste text) This paste function will remove all formatting and underlying coding. Use the formatting tools from this text editor to format the text in a web page friendly format.
  8. Paste from Word:  (Not recommended: the best results are obtained when using the Paste as plain text clipboard.) Use this icon to paste text that is coming from Microsoft Word. Although the results are better than pasting with Crtl-V there is still underlying coding from Microsoft that often distorts a web page.
  9. Undo: Reverse the last action taken.
  10. Redo: Reverse an "undo."
  11. Find: Use this to find a desired string of text.
  12. Replace: Use with the Find option to replace a text string with a new string of text.
  13. Select All: Use this to select all the text in the editor.
  14. Spell Check: Check the spelling of the text inside the editor.
  1. B: Use to bold selected text
  2. I:  Use to italicize selected text.
  3. U: Use to underline selected text.
  4. abc: Use to "strike through"78/ selected text.
  5. X2: Use to create subscript
  6. X2: Use to create superscript
  7. Eraser: Use to remove all formatting from selected text.
  8. Numbered List: Use to create numbered lists. See next screen shot on working with the properties of a numbered list.
  9. Bulleted List: Use to create a bulleted list. Right click with the cursor in an item in the list and select Bulleted List Properties and choose circle, disc or square for the type of bullet.  
  10. Indent (increase): Use this to indent text. This can be used like the Tab key in a word processing program. Click more than once to increase the size of the indent. All of the text added will be indented until the decrease indent icon is used.
  11. Indent (decrease): Moves the cursor and/or text to the left.
  12. Quote: Creates an indented block style quote with selected text. While text is selected clicking the quote icon will remove the indent.
  13. Div Container: Some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to apply formatting to a larger document fragment that extends beyond one block. If this is the case, a standard practice is to add a div container around a document fragment. Note that using div containers, just like other HTML elements, along with CSS styling, is an advanced feature that should only be used if you have sufficient knowledge of both Web standards. Info Source: http://docs.cksource.com/CKEditor_3.x/Users_Guide/Layout/Div
  14. Align Left: Aligns selected text on the left side.
  15. Center:  Centers selected text.
  16. Align Right:  Aligns selected text on the right.
  17. Justify: Justifies the selected text.

To access the properties of a numbered list right click in a numbered item and select Numbered List Properties. The window above will open. The starting number for the list can be changed and the Type of "numbering" can be selected.

  1. Link: Select text and click the Link icon to link it to a URL or click the Link icon and key in or paste the URL to display the full URL within the text. See the screen shot below for additional information.
  2. Unlink: Select a link or linked text and click the Unlink icon to remove the hyperlink.
  3. Anchor: An anchor can be created anywhere within the text at the cursor position, or selected text. Click on the Anchor icon and then enter the name of the anchor. The anchor is shown when text is edited and a link can be created to the anchor.
  4. Image: This icon can be used to insert an image into the text editor with or without additional text. The image needs to be uploaded to the File Uploads first, click the linked file name in the File Uploads and copy the URL of the image that opens in a browser window. See the screen shot below labeled "4. Image options".
  5. Table: Insert a table. To get back to the table properties right click in one of the table cells and select Table Properties. The right click will also give you the insert, delete and merge option for cells, rows and columns.
  6. Horizontal Line: Insert a horizontal line to use as a divider on a page. Never use a repeated line of hyphens or underscores to draw a dividing line. The horizontal line option will automatically re size to fit the width of the content. Drawing your own will often distort the page width.
  7. Smiley: Inserts a smiley. There are many to choose from.
  8. Special Character: Insert a special character.

         1. Link Options:

              Link Info tab - Set the link type as URL, Anchor or Email. Choose the protocol from http://, https://, ftp://, news:// or other. Key or paste in the appropriate link.

              Target tab - Choose the  target. Choices are frame, popup window, New Window, Topmost Window, Same Window or Parent Window.

              Advanced Tab - Use this tab only if you have adequate knowledge of HTML.

               

         4. Image Options:

              Image Info tab - Paste in the URL obtained from viewing the image via the file name in File Uploads. The image will show in the Preview box. Alternative Text is for screen readers and does

                                           not work with all browsers. Manage image sign and alignment here.

              Link tab -  If you want the picture to be a hyperlink, key or paste in the URL the picture should link to and choose the appropriate target.

              Advanced tab - Use this tab only if you have adequate knowledge of HTML.

  1. Styles, Format, Font and Size and be applied to selected text or chosen before text is keyed in.
  2. Text Color:  Choose a color from the color palette that opens.
  3. Background Color: The background color acts like a highlighter, only the area behind and in line with the text is colored.

Adding a Graphic

Adding a Graphic

The red rectangle indicate the two graphic options available on a right side Text/Graphic Editor. A graphic added to the right side will be automatically scalled down if it is wider than 185 pixels.

NOTE: No option is required the text editor portion may be used with out including a graphic.

  1. Graphic Upload: Use the Choose File button to browse to the image file. The image must be a .jpg, .png or .gif.
  2. Justification:Set the Justification for the image. If "Above" or "Below" is chosen then there is the additional option of choosing left, right or center.
  3. Image Width: Set the desired image width using the radio buttons. If "Custom Width" is chosen enter the number of pixels wide the image should be. Images will be resized acordingly when they are uploaded.
  4. Alt Text:  Provide text that will show when the mouse cursor hovers on the picture. Alt text is truly meant for screen readers for the visually impaired. So a screen reader will read the text entered as alt text. It is not support by all browsers. This option will appear with a red Asterisk by it, making it required, only if a user with permissions to the Settings module has made Alt Text required
  5. Caption: Key in a title/description to display under the image.
  6. Link Graphic To:  Add a URL to make the graphic a link.
  7. Graphic Link Type:  If a link is added in the "Link Graphic To:" option use the radio buttons to determine if the URL should open in a New Browser Window (usually used for an external website) or in Existing Browser Window (usually used for an internal web page.)
  8. Update button - Use this to save the changes.

Updating the Text/Graphic Editor

Updating the Text/Graphic Editor
  1. edit - Enter a tool heading, make tool active/inactive, schedule a status change fro active to in active or vise versa
  2. Change Position - Change the order in which the tools will appear on the current page.
  3. Move - Change the location of this tool to another page or to a new page. Main Body tools can only be moved to the Main Body of a different page and right side tools can only be moved to the right side of a different page.
  4. Update Text/Graphic Editor - Opens the Text/Graphic Editor and allows the information to be changed and/or a new graphic to be uploaded..
  5. Preview - Preview the page.
  6. Delete - Delete the tool from the page.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk