0

Probably I haven't got the clue about the best-practice here yet but I cannot create any clean buttons within the tinyMCE not the fullTinyMCE.

The wrapping makes the link always get the default link color instead of the appropriate white. This is correct in general of course but not for buttons. Trying this with the free Bootstrap theme brings the same result.

The wrapping should look like this: 

<a href="#"><button class="btn btn-primary" type="button">Click here</button></a>

but looks like this: 

<span class="btn btn-primary"><a data-mce-href="#" href="#">Click here</a></span>

I'd like to fix this myself but I am still learning the basics of IP. Where should I start or which would be the most appropriate way / best-practice?

Thank you, doc

Doc TheJones
  • 27
  • 6

1 Answers1

0

It's an issue with TinyMCE. It should enclose <span class="btn"> element within <a>. However, for some reason it does the other way around.

This is a known issue. Solution will be added with extra CSS rules that would fix this problem.

The quick issue is a behavioral hack. When creating a link with a button style, add extra symbol to a link text, i.e. ".my link". Then select the whole string and apply anchor (link/url). Then select the string but without that extra character (in my example leave out the dot) and apply button style. Finally, delete that extra character. In this sequence TinyMCE creates HTML element in correct order.

Audrius Jankauskas
  • 650
  • 4
  • 6
  • Thank you Audrius! I think the best option is to add some "debug"-CSS until this will be fixed. Let's hope this will be solved in the near future ;-) – Doc TheJones Aug 27 '14 at 23:23