How to wrap anchor around HTML on tinyMCE

Question

Well I have this problem, I made a few custom buttons to the tinyMCE wordpress editor to insert html so the user wouldn't get confused with shortcodes. Everything works relativly ok... but there is a button that wraps a anchor to a div.

<a name="buton" class="prod-button" href="some-href">
  <div>
       ...
  </div>
</a>

The problem is that when the content is inserted into the editor, the ancho is erased.

It is not a problem of the button, but it how tinyMCE is configurated I believe, because it also happens when I write the html directly in the editor

I've already done this and it didn't work

tinyMCE.init({
    allow_html_in_named_anchor: true,
    valid_children: '+a[div],+a[span],+a[img]', 
    extended_valid_elements : "a[*]",
});     

Any ideas?

Answer 1

In my opinion the best solution to insert the form is creating a short code. So, you can load the form into the sidebar and then use the short code to display the form content.

This the documentation https://codex.wordpress.org/Shortcode_API

Regards. Ed

Answer 2

You have to wrap the link with <div>, so like this:

<div>
  <a name="buton" class="prod-button" href="some-href">
    <div>
      ...
    </div>
  </a>
</div>

There is no need of allow_html_in_named_anchor. Only valid_children is required.