This document will describe Text / Graphic Editor and how to add it to a faculty page.
Text / Graphic Editor Example
This tool is used to add text and/or graphics to a web page. It is one of the most often used tools.
How to Add a Text / Graphic Tool to A Webpage
Within My Navigation Builder, in the Page Detail column, click Main Body.
Add Tool to the Page
- On the Page Detail page, choose Text / Graphic Editor from the first drop down menu.
- The second drop down menu is used to determine the location on the page. If no other tools exist, Place at top of page is the only option.
- Click Add.
Simply enter text in the textbox shown. Additional options for text are provided in ensuing steps.
Understanding the Text Editor Toolbox
- 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
- Preview: By clicking on this, this page will open in a new browser window.
- Print: This will print the contents entered in the editor.
- Cut: You can also use use Ctrl-X.
- Copy: You can also use Ctrl-C.
- Paste: You can also use Ctrl-V (Not recommended: the best results are obtained when using the Paste as plain text clipboard.)
- 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.
- 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.
- Undo: Reverse the last action taken.
- Redo: Reverse an "undo."
- Find: Use this to find a desired string of text.
- Replace: Use with the Find option to replace a text string with a new string of text.
- Select All: Use this to select all the text in the editor.
- Spell Check: Check the spelling of the text inside the editor.
Understanding the Text Editor Toolbox (cont)
- B: Use to bold selected text
- I: Use to italicize selected text.
- U: Use to underline selected text.
- abc: Use to "strike through"78/ selected text.
- X2: Use to create subscript
- X2: Use to create superscript
- Eraser: Use to remove all formatting from selected text.
- Numbered List: Use to create numbered lists. See next screen shot on working with the properties of a numbered list.
- 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.
- 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.
- Indent (decrease): Moves the cursor and/or text to the left.
- Quote: Creates an indented block style quote with selected text. While text is selected clicking the quote icon will remove the indent.
- 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
- Align Left: Aligns selected text on the left side.
- Center: Centers selected text.
- Align Right: Aligns selected text on the right.
- Justify: Justifies the selected text.
- 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.
- Unlink: Select a link or linked text and click the Unlink icon to remove the hyperlink.
- 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.
- 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".
- 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.
- 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.
- Smiley: Inserts a smiley. There are many to choose from.
- Special Character: Insert a special character.
Image Options (step 4 above)
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.
- Styles, Format, Font and Size and be applied to selected text or chosen before text is keyed in.
- Text Color: Choose a color from the color palette that opens.
- Background Color: The background color acts like a highlighter, only the area behind and in line with the text is colored.
Adding a Graphic
- Graphic Upload: Use the Choose File button to browse to the image file. The image must be a .jpg, .png or .gif.
- 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.
- 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.
- 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
- Caption: Key in a title/description to display under the image.
- Link Graphic To: Add a URL to make the graphic a link.
- 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.)
- Update button - Use this to save the changes.
Note: Graphics are not required. It is possible to have text with no graphic added.
Updating the Text/Graphic Editor
- edit - Enter a tool heading, make tool active/inactive, schedule a status change from active to inactive or vice versa
- Change Position - Change the order in which the tools will appear on the current page.
- 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.
- Update Text/Graphic Editor - Opens the Text/Graphic Editor and allows the information to be changed and/or a new graphic to be uploaded..
- Preview - Preview the page.
- Delete - Delete the tool from the page.