Format Using the Text Editor Tools (aka CKEditor)

CKEditor tools that allow you to format text, add links and email addresses, and include images and files. 

Table of Contents

• Where is this tool?
• Basic Functionality
• Add images to a text field from your computer
• Add images to a text field from the internet
• Add a link to another website
• Add a link to a file on your GO Smart server
• Create an email link
• Create a Table of Contents
• Add a Table

Where will you see this tool?

• Front End Manager > Agency Editor > Home Message
• Front End Manager > Navigation Editor
  • Pages
• Grant Editor > Program Cycles
  • Program Description
  • Program Message
  • Submission Text
  • Confirmation Text
• Grant Editor > Cycle Pages
  • Page Info/Instruction Text (no bold)
  • Questions (no bold)

What is the basic functionality?

To make use of the tools below, highlight the text to which you would like to apply the formatting and click the corresponding icon.

• Bold
• Italicize
• Underline
• Numbered lists (not recommended for Questions)
• Bulleted lists (not recommended for Questions)
• Size (recommended in lieu of bolding)
• Color
• Cut
• Copy
• Paste

Add images to a text field from your computer

1. Place your cursor where you’d like to place the image.
2. Click the Image icon.
3. Click the Browse Server button, skip to step 9 if you have already uploaded your desired image.
4. Click the Upload button.
5. Click Select to locate files and images on your computer.
6. Select up to five files from your computer, see the thumbnails in the “Drop files here to upload” window.
7. Click the Upload button.
8. See an “All files uploaded successfully” message at the bottom of your window.
9. Click on the single image you want to include in the text field.
10. Click the Select button.
11. View your image in the Preview window.
12. Use the Width and Height fields to the left to resize your image if desired.
    1. Click the lock if you do not want to constrain the width and height but rather distort your image.
13. Create a border or padding by entering number of pixels in either of the Border, HSpace (horizontal padding), and VSpace (vertical padding) if desired; best practice is 10 pixels for each.
14. Adjust the alignment by selecting Right or Left if desired.
15. Click OK to view the final placement.

Add images to a text field from the internet

[/text-with-icon][vc_video link=”https://youtu.be/P0oiYDhlEW4″][vc_column_text]

1. Place your cursor where you’d like to place the image.
2. Click the Image icon.
3. Copy the URL of your desired image into the URL field.
4. Click any blank space on the Image Properties window and view the image in your preview window.
5. Use the Width, Height, Border, etc fields to resize as you would any other image.
6. Click OK to view final placement.

Add a link to another website

1. Highlight the text or image to which you want to apply the link.
2. Click the Link icon.
3. Leave the Link Type set to URL.
4. Type the website address in the URL text field, leave protocol set to http:// unless you know your URL uses a different prefix.
5. Click OK and view the hyperlink effect applied to your text.

Add a link to a file on your GO Smart server

1. Highlight the text or image to which you want to link the file.
2. Click the Link icon.
3. Click the Browse Server button, skip to step 9 if you have already uploaded your desired file.
4. Click the Upload button.
5. Click Select to locate file or image on your computer.
6. Select up to five files from your computer, see the thumbnails in the “Drop files here to upload” window.
7. Click the Upload button.
8. See an “All files uploaded successfully” message at the bottom of your window.
9. Click on the single file you want to link to.
10. Click the Select button.
11. Click OK and see the link effect applied to your text.

Create an email link to open a pre-set email

1. Highlight the text or image to which you would like to apply the email feature.
2. Click the Link icon.
3. Change the Link Type to email.
4. Add the desired admin email address to whom emails should be sent.
5. Add your Message Subject (i.e. “Assistance Requested”).
6. Add Message Body text (if desired) to prompt applicant.
7. Click OK and see the link effect applied to your text.

 Create a Table of Contents

1. Create all of the language of your text field.
2. Place your cursor in the first spot to which you would like your ToC to jump.
3. Click the Anchor icon.
4. Enter a word or phrase that designates that spot (such as the first word of the paragraph).
5. Click OK and view a flag in your desired spot.
6. Place your cursor in the next spot to which you would like your ToC to jump and repeat steps 3 through 5.
7. Repeat the above until all of your anchors are placed.
8. Navigate to the top of your page and type out your Table of Contents index.
9. Use other icons to add formatting to your Table of Contents (ie. create a bulleted or numbered index and bold or underline Table of Contents).
10. Highlight the first item in the index and click the Link icon.
11. Click the Target tab.
12. Select Same Window (_self) from the drop-down menu.
13. Click the Link Info tab.
14. Select “Link to anchor in the text” from the Link Type drop-down menu.
15. Select Anchor by Name and choose your desired anchor (the list is populated with names you previously used while creating your anchors).
16. Click OK and see link effect applied to your first index item.
17. Repeat steps for additional Table of Contents items until each item in your ToC is linked to an anchor below.

Add a table

1. Place your cursor in the text field where you want the table to appear.
2. Click the Table icon.
3. The Table Properties window will open and will default to a 3×2 table with 500 width (the recommended width).
4. Change any of the settings by typing new properties into the appropriate fields.
5. Add header cells to columns or rows that will center and bold any text that is  is typed into those cells.
6. Add a border if desired.
7. Cell spacing and padding does not appear, disregard these fields.
8. Align the table if desired.
9. Give the table a title if desired by entering text in the Caption field.
10. Click OK and view your table in your text field.
11. Place your cursor in any cell of the table to add your language.

Watch this video to view a comprehensive overview of the Text Editor tools.