Add a TinyMCE Anchor Link to Your Course Content

by Natalie Robles
Follow

You can now add a TinyMCE anchor link into your course content and catalog headers. An anchor, or bookmark, button is available in your editing toolbar that inserts the anchor directly into your HTML. As a Dashboard Admin, you’ll find this anchor link selector next to the hyperlinking tool. 

Screen_Shot_2021-03-05_at_3.50.41_PM.png

 

To add an anchor:

  • Click in the text box, or select the text, where you would like to place the anchor. This would be the section you would like to direct your learners to.
  • Click the anchor icon on the toolbar. A dialogue box appears.
  • Type an ID to identify the anchor. The ID is meant to help you identify how to link to the anchor in the next step. The ID should start with a letter, followed by only letters, numbers, dashes, dots, colons or underscores. 
    • The string will be inserted into the HTML as an anchor ID at the location of the cursor. For example, if you place your cursor at the beginning of “How do I complete a course?” click on the anchor button, and enter “ID1” in the dialog box, the resulting HTML will take the form of <p><a id="ID1"></a>How do I complete a course?</p>.

1739f888-470e-4bd0-a5d1-a707970ca5d0.png

 

To link to the anchor:

  • Highlight the text you want to link and click the hyperlink icon on the toolbar.
  • Click the anchor dropdown and select the anchor ID that corresponds to the anchor you want to link to. When a learner clicks on the linked text, they will be taken to the anchor link.

954dd8f8-913e-4c50-a05b-74eb6ecbf07e.png


Dashboard View:

In the below view, "How do I complete a course?" is the anchor (as indicated by the anchor button), and the hyperlinked text is the selected anchor ID. 

Screen_Shot_2021-02-25_at_10.03.40_PM.png

Student View: 

Screen_Shot_2021-02-25_at_10.10.51_PM.png

Powered by Zendesk