Follow

Text/Graphic Editor 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 screenshots will be provided with descriptions of the differences.

Access the Main Body or Right Side Bar

TGE_1.jpg

Within the CMS4Schools Main Website Administration, click into the Navigation Builder and navigate to the page you would like to update. Select the Main Body or Right content of where the Text/Graphic Editor Tool will be displayed on the page.
Note: If no Right Side tools are added/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.

Main Body: Add Text/Graphic Editor

TGE_2.jpg
  1. Add Tool to this page: Choose the Text/Graphic Editor from the list
    Note: The Text/Graphic Editor will always be the default tool selected when first entering the Main Body
  2. If you have other content on the page, you can select where you would like the new tool to be added
  3. Click Add to open the Text/Graphic Editor

Right Side: Add Right Side Text/Graphic Editor

TGE_3.jpg
  1. Add Tool to Right Side: Choose the Right Side Text/Graphic from the list
    Note: The Right Side Text/Graphic will always be the default tool selected when first entering the Right Side Bar
  2. If you have other content on the page, you can select where you would like the new tool to be added
  3. Click Add to open the Right Text/Graphic

Formats of the Text/Graphic Editor

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

Note: A graphic is not required when using the Text/Graphic editor. See the Add a Graphic (Main Body) section for more details about adding a graphic to the Text/Graphic Editor.

TGE_4.jpg

Fields on both Primary Main Body and Right Side Bar Text/Graphic tool

  1. Text: Field where you enter the main body of text. The Text/Editor section will go into more detail about the function of this field.
  2. Graphic: Both the Main Body and the Right Side have the ability to upload an image file. This tool does not have a cropping and will scale down the image to fit the selected area that tool is being added to.
  3. *Alt Text: This is the text that is displayed when a user hovers their mouse over the image.
  4. Link/URL for Graphic: Both the Main Body and Right Side allow you to enter a link/URL that will open when selected.
    Main Body: The link opens when the graphic is clicked.
    Right Side: The link opens when either the graphic or text is clicked.
  5. Graphic Link Type: This designates if the graphic link/URL will open in a new window (external page) or the existing window (internal page).

Fields that are different
Main Body

  1. Justification: Set location of the image within the tool.
  2. Image Width: Set how large the image should be displayed.
  3. Caption: option to display text under the image

Right Side

  1. Place Into Vertical Scrolling I-Frame: 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 used 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.
    Note: Faculty Right Side has limited graphic capabilities and no I-Frame option.

The Text Editor Options

TGE_5.jpg

Line 1

  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 exit the HTML view and see the regular text view. Widgets can be added to a web page by clicking the "Source" icon and pasting the provided code
  2. Check Accessibility (): Checks the accessibility of the text
  3. Preview (): By clicking on this, this page will open in a new browser window
  4. Print (): This will print the contents entered in the editor
  5. Cut (): Cut the selected text. The keyboard shortcut is Ctrl-X
  6. Copy (): Copy the selected text. The keyboard shortcut is Ctrl-C
  7. Paste ():  Use to Paste text. Using this tool is not recommended as best results are obtained when using the Paste as plain text clipboard
  8. Paste as plain text (): This is the recommended function for pasting. This paste function will remove all formatting and underlying coding. After pasting with this tool, use the formatting tools from this text editor to format the text in a web page friendly format
  9. Paste from Word (): Use this icon to paste text that is coming from Microsoft Word. Using this tool is not recommended as best results are obtained when using the Paste as plain text clipboard. There may still be underlying code from Microsoft that often distorts a web page
  10. Undo (): Reverse the last action taken
  11. Redo (): Reverse an "undo
  12. Find (): Use this to find a desired string of text
  13. Replace (): Use with the Find option to replace a text string with a new string of text
  14. Select All (): Use this to select all the text in the editor
  15. Spell Checker (): Check the spelling of the text inside the editor

Line 2

  1. Bold (): Use to bold the selected text
  2. Italic (): Use to italicize the selected text
  3. Underline (): Use to underline the selected text
  4. Strikethrough (): Use to strikethrough the selected text
  5. Subscript (): Use to create subscript
  6. Superscript (): Use to create superscript
  7. Remove Format (): Use to remove all formatting from selected text
  8. Insert/Remove Numbered List (): Use to create/remove numbered lists. See the Numbered List Properties section on working with numbered lists
  9. Insert/Remove Bulleted List (): Use to create/remove 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. Decrease Indent ():  Moves the cursor and/or text to the left.
  11. Increase Indent (): 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 following the increase indent will be indented at the same level until the decrease indent icon is used.
    Note: If adding a quote, it's recommended to use the Block Quote option instead of increasing the indent.
  12. Block Quote ():  Use to create an indented block style quote.
  13. Create Div Container (): Some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to format 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, is an advanced feature that should only be used if you have sufficient knowledge of both HTML and CSS web standards.
  14. Align Left (): Aligns selected text on the left side.
  15. Center (): Centers selected text.
  16. Align Right (): Aligns selected text on the right. Not recommended to use this alignment.
  17. Justify (): Justifies the selected text. Not recommended to use this alignment.
  18. 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 Link section below for additional information.
  19. Unlink (): Select a link or linked text and click the Unlink icon to remove the hyperlink.
  20. 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.

Line 3

  1. 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 Image Properties section below.
  2. 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. See the Table Properties section below for more details about inserting a table.
  3. Insert 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 resize to fit the width of the content. Drawing your own will often distort the page width.
  4. Smiley (): Inserts a smiley. There are many to choose from.
  5. Insert Special Character (): Insert a special character.

Line 4

  1. Formatting Styles (): Use to set different block styles
  2. Paragraph Format (): Use to set the paragraph/header format
  3. Font Name (): Use to change the font of the text. Limit the use of this as it will override any design setup for the website, and some fonts won’t work well with specific browsers or devices.
  4. Font Size (): Use to change the font size of the text. Limit the use of this as it will override any design setup for the website. This will break the responsive nature of the font size on the page and the text will display this size on every device.
  5. Text Color (): Choose a color from the color palette that opens. Limit the use of this as it will override any design setup for your website.
  6. Background Color (): The background color acts like a highlighter, only the area behind and in line with the text is colored. Limit the use of this as it will override any design setup for your website.

Numbered List Properties

After inserting a number list, you can right-click on the list and select the “Numbered List Properties” option.

TGE_6.jpg

  1. Start: Allows you to set which number the list starts at.
  2. Type: Select the type of numbering for the list.

Link

TGE_7.jpg

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

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

Image Properties

TGE_8.jpg

Image Info Tab: Paste in the URL obtained from File Uploads. The image will show in the Preview box. Alternative Text is for screen readers and doesn’t work with all browsers. Manage image sign and alignment here. See the File Uploads article for more information about adding an image to file uploads.

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.

Table Properties

TGE_8.5.jpg

  1. Rows/Columns: Set the number of rows and columns desired for the table
  2. Header: Recommend to always have a header for accessibility purposes
  3. Width: Always set to 100% so the table will be responsive to the size of the device it is displaying on.

See the Table Tips article for more details/options about displaying a table on your site.

Add a Graphic (Main Body)

Note: Adding a graphic is optional. However, if a graphic is added the Alt Text should also be filled out.

TGE_9.jpg

Note: [1] and [4] in the rectangles are the two graphic options also available on a Right Side Text/Graphic Editor.

  1. Graphic Upload: Use the Choose File button to browse to the image file. The image must be a .jpg, .png or .gif.
    Note: A graphic added to the right side will automatically be scaled down if it is wider than 185 pixels.
  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 accordingly when they are uploaded.
    Note: The graphic cannot be made larger after Adding.
  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. A screen reader will read the text entered as alt text. It is not supported 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: Option to have a caption 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 (external website) or in Existing Browser Window (internal page.)

Update the Text/Graphic Editor

TGE_10.jpg
  1. edit: Enter a tool heading, make tool active/inactive, schedule a status change to either active or inactive. See the Edit Text/Graphic Editor Tool section below for more details.
  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.

Edit Text/Graphic Editor Tool

TGE_11.jpg

  1. Tool Heading: Enter a heading that will display on the page.
  2. Status: Set the page to active or inactive.
  3. Schedule a Status Change: If this is selected another area will open where you can add details about the status change
    a. Status Change Date: Set the date of the change
    b. Change Status To: designate if you want the page to become active or inactive on the specified date
    c. Email Notification Address(es): Enter the email addresses to be notified after the status change occurs.
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.