1

I have this problem in a specific page of my wordpress website: when I switch from text editor to visual editor I immediately lose all my links (placed in a div element).

I give you a detailed example of what happen every time:

I start editing my page and the section with href looks like this

enter image description here

Then, if I switch to visual editor and come back to the text, it becomes like this

enter image description here

As you can see the "a" element has disappeared and it's very annoying because I have to replace all my links every time or switch to a previous edit and losing my recent ones.

How can i solve this? I would like to be able to switch freely between editing modes without losing any code.

Thanks a lot.

3
  • Is this the standard TinyMCE editor? It's been a while since I used that sorry. I don't think there's any round trip to the server here, so whatever's happening will be in the TinyMCE JavaScript
    – Rup
    Dec 15, 2020 at 11:44
  • Is this the classic editor or the block editor? Keep in mind this stack is for programming questions, not user support, any answer you get will require basic programming knowledge to understand, if this is not what you were hoping for you should look at the .org support forums
    – Tom J Nowell
    Dec 15, 2020 at 12:23
  • I use the classic editor, this one: it.wordpress.org/plugins/classic-editor I don't know if there is something wrong with my code or with wordpress editor.. thanks Dec 16, 2020 at 9:10

1 Answer 1

2

The problem is your <div> inside of your anchor tag. See this answer on StackOverflow about what tags are allowed inside of anchors.

Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes.

and

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Anchors are inline, while <div> tags are block-level, hence the block-level element cannot go inside of the inline element. If you need the element inside of the link, try using a <span> with the display:block CSS property:

<a href="somelink"><span class="tag">Link</span></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.