.. _Work with the Text Editor:

#########################
Work with the Text Editor
#########################

.. tags:: educator, how-to

.. contents::
  :local:
  :depth: 2

****************************
Add Text Content
****************************

This video will take you through adding text (and images!) to your course:

.. youtube:: -CQekI4-Hjw

#. Under **Add New Component**, select **Text**.

#. Select the template.

   The rest of these instructions assume that you selected **Text**, which
   creates an empty Text component with the :ref:`visual editor<The Visual
   Editor>` selected.

   An empty Text component appears at the bottom of the unit, and the Text
   component opens in the visual editor.

#. Enter and format your content. You can :ref:`review the HTML markup<Work
   with HTML code>`.

#. To enter a display name for the component, select the Pencil icon next to
   the title in the top left corner of the visual editor. Changing the
   display name from it's default value to a unique, descriptive display name
   can help you and your learners identify course content quickly and
   accurately. If no title is present, the platform shows "Text" as the name
   of the component when in Studio.

#. Select **Save**.

When you use the visual editor, you can also perform the following tasks.

* :ref:`Add a Link in a Text Component`
* :ref:`Add an Image to a Text Component`

.. _Add an Image to a Text Component:

**********************************
Add an Image to a Text Component
**********************************

.. youtube:: -CQekI4-Hjw

When you use the Visual Editor, you can add any image from your computer to
a Text component. You can see a preview of the image before you add it to the
component.

.. note::
 * Before you add an image, make sure you obtain copyright permissions for
   images you use in your course, and cite sources appropriately.
 * To add effective alternative text for images, review :ref:`Best Practices
   for Describing Images`.
 * You can only add one image at one time.
 * Each individual image file must be smaller than 10 MB.

To add an image to a Text component, you can use one of the following
procedures.

* :ref:`Locate an image <Locate an Image on Your Computer>` by using the
  **Browse Your Computer** option in the **Add Image** dialog box.
* :ref:`Select an image <Select a Previously Uploaded Image>` you have
  previously uploaded.

.. contents::
 :local:
 :depth: 1

.. _Locate an Image on Your Computer:

===================================
Locate an Image on Your Computer
===================================

#. In the Text component, position the cursor where you want to add an image,
   and then select the image icon on the toolbar.

#. In the **Add an Image** dialog box, **Upload a New Image (10 MB max)**.

#. In the dialog box that opens, locate the file you want to add, and
   then select **Open**, or locate the image in the Image Gallery, and then
   select **Next**.

   As soon as your image is selected, the **Image Settings** dialog box
   opens.

#. In the **Edit Image Settings** dialog box, add an image description.

   * In the **Alt Text** field, enter alternative text for
     the image. This text becomes the value of the ``alt`` attribute in HTML
     and is required for your course to be fully accessible. For more
     information, see :ref:`Best Practices for Describing Images`.

   * If your image is a decorative image that does not convey important
     information, select the **This image is decorative (no alt text required)**
     checkbox.

#. (optional) Specify the width and height of your image. For more information,
   see :ref:`Change the Image Size`.

#. Select **Save**.

#. Save the Text component and test the image.

.. _Select a Previously Uploaded Image:

===================================
Select a Previously Uploaded Image
===================================

#. When you upload an image, the image automatically becomes available in a
   gallery list that opens when you add an image to a Text component.

#. In the Text component, position the cursor where you want to add an image,
   and then select the image icon on the toolbar.

#. In the **Add an Image** dialog box, locate the image in the gallery list,
   and then select **Next**.  There are sort and filter options available for
   the gallery list to make it easy to find the image you need.

#. In the **Image Settings** dialog box, complete one of the following
   options.

   * In the **Alt Text** field, enter alternative text for
     the image. This text becomes the value of the ``alt`` attribute in HTML
     and is required for your course to be fully accessible. For more
     information, see :ref:`Best Practices for Describing Images`.

   * If your image is a decorative image that does not convey important
     information, select the **This image is decorative (no alt text
     required)** checkbox.

#. (optional) Specify the width and height of your image. For more information,
   see :ref:`Change the Image Size`.

#. Select **Save**.

#. Save the Text component and test the image.


.. _Format an Image in a Text Component:

********************************************
Format an Image in a Text Component
********************************************

You have several options for formatting an image in a Text component.

.. contents::
 :local:
 :depth: 1

.. _Align an Image:

=================
Align an Image
=================

To align your image to the right, the left, or the center, follow these steps.

#. In the Text component, select the image.

#. On the toolbar, select the left align, right align, or center icon.

.. _Change the Image Size:

=======================
Change the Image Size
=======================

To change the size of your image, follow these steps.

#. In the Text component, select the image you want to edit, and then
   select the Contextual image icon that appears above the image.

#. In the **Image Settings** dialog box, locate **Image Dimensions**, and
   then enter the values you want for the **Width** and **Height**
   options.

   .. note::
    To make sure that the image keeps the same proportions when you change the
    image size, make sure that **Lock proportions** is selected, and enter a
    number in only the **Width** field or the **Height** field. After you tab
    or click outside that field, the number in the other field changes to a
    value that maintains the image proportions.

#. Select **Save**.

If you want to change the image back to the original size, clear the values in
the **Width** and **Height** fields.

.. _Add Link to Website Course Unit or File:

.. _Add a Link in a Text Component:

**************************************
Add a Link in a Text Component
**************************************

When you use the visual editor, to add a link to a website, course unit, or
file in a Text component, you work with the **Insert link** dialog box.

For more information, see the following tasks.

* :ref:`Add a Link to a Website`
* :ref:`Add a Link to a Course Unit`
* :ref:`Add a Link to a File`

.. _Add a Link to a Website:

=======================
Add a Link to a Website
=======================

#. Select the text that you want to use as the link text.

#. Select the link icon in the toolbar.

#. In the **Insert/Edit link** dialog box, enter the URL of the website that
   is the destination for your link in the **URL** field.

#. If you want the link to open in a new window, select the dropdown arrow
   next to the **Open Link In...** field, and then select **New Window**.
   If not, you can leave the default value.

#. Select **OK**.

#. Save the Text component.

#. To test the link, select **View Live Version** or **Preview**. When the unit
   opens in the LMS, select the linked text and verify that the correct website
   opens.

.. _Add a Link to a Course Unit:

===========================
Add a Link to a Course Unit
===========================

.. note::
  When you create a link to another component, the unit of that destination
  component must be published for the link to work.

#. Obtain the location ID of the unit you want to link to.

   #. In Studio, open the page for the unit that you want to link to in Studio,
      and then locate **Unit Location** in the right pane.

   #. Under **Unit Location**, select and copy the alphanumeric text in the
      **Location ID** field.

      .. image:: /_images/educator_references/UnitIdentifier.png
       :alt: The **Unit Location** area in the right pane of a unit page, with
           the unit's location ID circled.

#. Open the Text component where you want to add the link.

#. Select the text that you want to make into the link.

#. Select the link icon in the toolbar.

#. In the **Insert link** dialog box, enter a value that resembles the
   following value in the **URL** field.

   ``/jump_to_id/<location ID>``

   Make sure to replace <location ID> (including the brackets) with the
   location ID that you copied in step 1, and make sure that you include both
   forward slashes (/).

  .. caution::
    Ensure you use ``/jump_to_id/<location ID>`` as the URL value. Do not
    use the URL of the unit that you see in the browser address bar.  If you do
    not use ``/jump_to_id/<location ID>``, the link will be broken if you
    export and then import the course.

#. If you want the link to open in a new window, select the dropdown arrow
   next to the **Open Link In...** field, and then select **New Window**. If
   not, you can leave the default value.

#. Select **Insert**.

#. Save the Text component and test the link.

.. _Add a Link to a File:

====================
Add a Link to a File
====================

.. tip::
 When you add links to files, open the Text component and the **Files &
 Uploads** page in separate browser windows. You can then more quickly copy
 file URLs.

You can add a link in a Text component to any file that is uploaded for the
course. For more information about uploading files, see :ref:`Add Course Files`.

.. note::
 Do not use this method to add images to Text components. Instead, use the
 method in :ref:`Add an Image to a Text Component`.


#. On the **Files & Uploads** page, locate the file that you want, and then
   select **Studio** in the **Copy URLs** column.

  .. note::
   You must use the **Studio** URL to link to the file, not the **Web** URL.
   For more information, see :ref:`Add Course Files`.

#. In the Text component where you want to add the link, select the text that
   you want to make into the link.

#. In the toolbar, select the link icon.

#. In the **Insert link** dialog box, paste the Studio URL for the file in the
   **URL** field. For example, the URL might resemble the following URL.

   ``/static/FileName.pdf``

   Make sure that you include both forward slashes (/).

#. (optional) If you want the link to open in a new window, select the dropdown
   arrow next to the **Open Link In...** field, and then select **New Window**.
   If not, you can leave the default value.

#. Select **OK**.

#. Save the Text component and test the link.

.. _Paste without Formatting in a Text Component:

********************************************
Paste without Formatting in a Text Component
********************************************

Many course authoring teams rely on copying and pasting content from documents
such as Google docs or Microsoft Word. Correct formatting in Studio and the LMS
can be most easily realized through Power Paste.

When you copy and paste content into the Text Editor, you will receive a “Paste
Formatting Options” popup on the page.  If you choose “Remove formatting”, then
the bullets will be correctly aligned with text in both Studio and the LMS. If
you select “Keep formatting”, then the formatting is unchanged and bullets and
text will not be aligned in Studio or the LMS.


.. image:: /_images/educator_how_tos/HTML_PowerPastePop.png
  :alt: an image of the popup you will receive after copying and
   pasting content into the Text Editor. This popup allows you to select
   either keep or remove formatting.
  :width: 300

Below is a bulleted list example, a type of formatting that commonly needs Power
Paste.  If you select “Keep formatting”, this is what Studio and LMS will show:

.. image:: /_images/educator_how_tos/PowerPaste_KeepFormatting.png
  :alt: an image of a bulleted list in LMS in which you have chosen to “keep
   formatting” when you were in the editor. The bullets and text are misaligned.
  :width: 600

However, if you select “Remove formatting”, this is what Studio and LMS will show:

.. image:: /_images/educator_how_tos/PowerPaste_RemoveFormatting.png
  :alt: an image of a bulleted list in LMS in which you have chosen to “remove
   formatting” when you were in the editor. The bullets and text are correctly
   aligned.
  :width: 600

.. _Text Component Templates:

**************************
Text Component Templates
**************************

When you create a Text component, you select from a list of templates and
editor types, including the following:

* Text
* Announcement
* IFrame Tool
* Raw HTML

The **Text** template loads the Visual Editor with no pre-canned text.

The **Announcement** and the **IFrame Tool** templates load the Visual Editor
with pre-canned text that instructs the user how to format Announcements,
or how to use IFrames.

The **Raw HTML** editor type uses the raw HTML editor by default. All other
options use the visual editor by default. There is no way to switch between
Visual and Raw editor types once selected.

.. seealso:: 

 :ref:`About Text Components` (concept)

 :ref:`Work with HTML code` (how-to)

 :ref:`Manage the Full Screen Image Tool` (how-to)


**Maintenance chart**

+--------------+-------------------------------+----------------+--------------------------------+
| Review Date  | Working Group Reviewer        |   Release      |Test situation                  |
+--------------+-------------------------------+----------------+--------------------------------+
| 06/24/2025   | Leira (Curricu.me)            | Sumac          | Pass                           |
+--------------+-------------------------------+----------------+--------------------------------+