anchor

Visual Editor Altering HTML

Description

You edited a page through the Text editor, but when you switch to Visual editor, some of the HTML you added changes or is removed.

This is known to happen specifically when adding Bootstrap Collapsible Accordion Menus and anchors but may happen with other bits of code as well.

Accordions

If you add a collapsible accordion menu to your page through the text editor, it deletes the following line of code from every panel:

<a class="collapsed" href="#PanelID" data-toggle="collapse" data-parent="#accordion">

It also deletes the corresponding </a>. Note that this <a> tag wraps each .panel-heading div.

Anchors

Sometimes when you add an anchor on a page, it will later disappear. This does not happen all the time but it appears to happen by either adding an anchor in the Visual editor, switching to text editor, and switching back to Visual, or adding an anchor in the text editor and switching to Visual.

Steps to Fix the Issue

Because there is no known solution for this issue, the best thing to do would be to avoid going back into Visual editor on any page that has a collapsible accordion menu/anchor. If you do go into Visual editor, you could do one of two things:

  • Click Browse next to Revisions in the Publish box and restore the latest version that had the full code (if there are any).
  • Go back and manually re-add the code yourself.

Other Code

If the above suggestions do not solve your issue or you’ve found other code that the Visual editor alters, please email us at webdev@uconn.edu.

Create an Anchor

An anchor is a link that brings you to a specific section of a page. To create an anchor, follow these steps using the visual editor:

  1. Click on the location you want your link to be redirected to.
  2. Click on the Insert dropdown from the menu at the top of the visual editor, then click Anchor.
  3. Type a name for your anchor – keep it lowercase, no spaces or special characters.
  4. Click on OK.
  5. Then go to the location where you want the hyperlink, highlight text.
  6. Click on the Paperclip Icon, then Insert link.
  7. In the URL box, type a # followed by your anchor name.
  8. Click on Add Link.