Text Editors

atto and tiny mceSimilar to most websites, students, faculty, and staff use an online text editor to add text, images, and video in CLE courses. The TinyMCE HTML editor is the default editor in the CLE and you now have the option to use an alternate text editor, called Atto.

Why would you want to use the Atto editor? Because the Atto editor improves usability and accessibility, and is also mobile-friendly. You can read more about the Atto text editor on the Convergence blog.

Click the TinyMCE or Atto tabs above to learn more about the functionality of each text editor.

TinyMCE HTML Text Editor

tiny mce editor

Why would you want to use the TinyMCE text editor? Maybe you are accustom to the functionality of this editor and prefer specific workflows for adding content to your course. The TinyMCE editor is a favorite with course designers and those who prefer to have more control over the sizing and placement of images when using the editor.

The TinyMCE text editor is the default text editor in the CLE. Follow the steps below to select your CLE text editor:

  1. Log in to the CLE
  2. From the Navigation block, click My Profile > View Profile
  3. From Administration block, click Edit Profile
  4. From the Text editor drop-down, choose TinyMCE HTML editor
  5. Click Update Profile button

See the screenshots below highlighting TinyMCE text editor functionality:


1. Keyboard Shortcuts

Use keyboard shortcuts to copy and paste text into the text editor. Using the right-click menu to copy/paste in the text editor is no longer supported by web browsers. Here are keyboard shortcuts that are particularly useful when using the collapsed editor:

Shortcut Action
ctrl+z undo
ctrl+y redo
ctrl+b bold
crtl+i italic
crtl+u underline

2. Expand the Editor

See all the tools

3. Full Screen Window

If you are working with a large amount of text and would prefer to see the window full screen, the Toggle full screen mode button is the one for you.

toggle full screen

4. Enlarge Window

Triangle

5. Formatting Text

formatting

6. Undo and Redo

Undo and redo7. Copy and Paste

When you copy and paste something into the CLE, there are a few things to be aware of:

  • Copy/Paste from a Website into the CLE: When you highlight text from a website and choose to copy, often times you are copying more than the eye can see. Copying and pasting can carry over some unwanted coding that can have the potential to cause havoc in the CLE. If you copy and paste text from a website, then you should always paste this text into a text editor to strip the text of any additional HTML coding it might have. Keep in mind that to the naked eye, it may appear to be doing absolutely nothing. However, it is getting rid of problematic code. Then, highlight and copy the text from Notepad and paste it into the CLE and format from there.
  • Copy/Paste inside of CLE: If you are copying and pasting text from one CLE resource/activity to another, it is important to copy from the edit page and not directly from the CLE course page.
  • Copy/Paste from Microsoft Word: If you copy and paste text from a Word document, you can use the Paste from Word button located in the text editor to get rid of the extra HTML coding (see screenshot below).

Paste from word

8. Hyperlink Text

First copy the URL you would like to link to. Next, highlight text in the editor, click the Insert hyperlink button, and the Insert/edit link window will pop up.

Hyperlink

Generally, the only settings that you will want to edit are located in the General tab. Paste the Link URL in the appropriate space and change the Target to Open in new window (_blank). This will ensure that the URL will open in a new window and your course participants will remain in the CLE course. Lastly, click the Insert button to close the window.

add link

To insert a link to a file such as a pdf in the text editor, click the Browse button from the Insert/Edit Link pop-up. This is helpful when adding links to documents in CLE Labels, Pages, Books and more. Select how the file should display (e.g. Open in a new window) from the Target drop-down to have the file open in a new window, preventing students from exiting the CLE course.

browse button
You can now upload the file you want to link to from your computer or other repository from the file picker.

file picker

9. Add an Image

Image

10. Add Bullets and Numbering

Bullets

11. Justify Text

Tab and justification

12. Add a Horizontal Rule Horizontal rule

13. Embed Media@UCSF Content

Read more about the Media@UCSF Plug-in.

Media button

14. Add a Table

You can insert a table into the document, as well as use the icons highlight below to edit the table, such as editing the table properties, editing the cell properties, adding/deleting rows and columns, and splitting/merging table cells.

Tables

15. Add an Anchor

Anchor

16. Toggle to HTML Mode

HTML

17. Special Functions

Use the DragMath Equation Editor to insert complex or specific math equations and symbols into your text. Note: You will need to have JavaScript installed on your machine to use this Editor.

Use the Special Characters button to add in characters from other languages or from mathematical sciences.

Use the Find button, if you want to quickly find a word in your text. Use the Replace button, if you want to quickly have all of the instances of one word changed to a different word, such as a different spelling or spelling out an acronym.

Math special find&replace

Math Equation Editor

Screen Shot 2015-03-20 at 9.50.35 AM

Find and replace

Atto HTML Text Editor

atto

Why would you want to use the Atto editor? Because the Atto editor improves usability and accessibility, and is also mobile-friendly. You can read more about the Atto text editor on the Convergence blog.

The Atto text editor is an alternate text editor in the CLE. Follow the steps below to select your CLE text editor:

  1. Log in to the CLE
  2. From the Navigation block, click My Profile > View Profile
  3. From Administration block, click Edit Profile
  4. From the Text editor drop-down, choose Atto HTML editor
  5. Click Update Profile button

See the screenshots below highlighting Atto text editor functionality:


1. Mobile-Friendly

The Atto text editor is designed to be mobile-friendly and respond to the device you are using. Try out Atto using your desktop, laptop, tablet, or smart phone and let us know what you think!

mobile atto

2. Add an Image using Drag and Drop (only in Atto)

Add an image to resources and activities by clicking the Image button or just drag and drop an image from your computer into the Atto text editor. The ability to drag and drop images on the front page of a CLE course was a very popular feature when it was released in 2012, and we are excited to see this functionality extended for adding images in the Atto editor. Avoid using Internet Explorer as some functionality may not work with the IE browser, such as drag and drop.

insert image

Need to edit an image size or description? Just double click on image to edit image properties.

insert image 2

3. Accessibility Checker (only in Atto)

Check to make sure that your course is accessible for participants using screenreaders with a click of a button. The Accessibility Checker reviews the text entered in the editor and congratulates you when “no accessibility problems found!” If the content is not accessible you will get a warning message and you can then correct the issue(s).

atto accessibility checker

4. Screenreader Help (only in Atto)

Confirm that all links, images, and other media are accessible for course participants using screenreaders.

atto screenreader helper

5. Keyboard Shortcuts

Here are keyboard shortcuts that are particularly useful when using the collapsed editor:

Shortcut Action
ctrl+z undo
ctrl+y redo
ctrl+b bold
crtl+i italic
crtl+u underline

6. Expand the Editor

expand atto editor

7. Full Screen Window

If you are working with a lot of text and would prefer to see the window full screen, the Toggle Full Screen button is the one for you.

full screen

8. Enlarge Window

enlarge window

9. Formatting Text

text formatting

10. Undo and Redo

redo undo

11. Copy and Paste

When you copy and paste something into the CLE, there are a few things to be aware of:

  • Copy/Paste from a Website into the CLE: When you copy text from a website such as Gmail, often times you are copying more than the eye can see. Copying and pasting can carry over some unwanted code that can have the potential to cause havoc in a CLE course. If you copy and paste text from a website, then you should always paste this text into a text editor (such as Notepad or TextEdit) to strip the text of any additional HTML coding it might have before pasting into the CLE.
  • Copy/Paste inside of CLE: If you are copying and pasting text from one CLE resource/activity to another, it is important to copy from the edit page and not directly from the CLE course page.

Use keyboard shortcuts to copy and paste text into the text editor. Using the right-click menu to copy/paste in the text editor is no longer supported by web browsers.

See information in the screenshot below for using the Clear Formatting button.

clear formatting

12. Hyperlink Text

First copy the URL you would like to link to. Next, click the Insert hyperlink button, and the Insert/edit link window pops up.

hyperlink

From the Create Link window, paste the Link URL in the appropriate space and check Open in a new window. Students will remain in the CLE course and the URL will open in a new window. Lastly, click the Create Link button to save and close the window.

insert a link

To insert a link to a file such as a pdf in the text editor, click the Browse Repository button from the Create Link window. This is helpful when adding links to documents from CLE Labels, Pages, Books and more. Check the Open in a New Window box to have the file open in a new window, and avoid the student from being directed out of the CLE course.

insert file

You can then upload the file you want to link to from your computer or other repository from the file picker.

file picker

 13. Add Bullets and Numbering

bullets

14. Justify Text

text justification

15. Add a Horizontal Rule

horizontal rule

16. Embed Media@UCSF Content

Read more about the Media@UCSF Plug-in.

embed media

17. Add a Table

You can insert a table into the document, as well as use the icons highlighted below to edit the table, such as editing the table properties, editing the cell properties, adding/deleting rows and columns, and splitting/merging table cells.

tables

18. Toggle to HTML Mode

html toggle

19. Special Functions

charter and equation editor

Use the DragMath Equation Editor to insert complex or specific math equations and symbols into your text. Note: You will need to have JavaScript installed on your machine to use this Editor.

equation editor

Use the Special Characters button to add in characters from other languages or from mathematical sciences.

insert character