Stop TinyMCE from deleting empty HTML tags

Question

I'm developing a Bootstrap theme for Wordpress and it's very difficult to implement since Bootstrap uses empty tags with data-attributes and classes but TinyMCE removes the empty tags when I save the page I'm editing.

Here is my code:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

It is part of the Bootstrap Carousel.

Now I'm trying to add this to my front page using the text editor. Whenever I save the page TinyMCE removes the span-tags which are meant for screenreaders.

I tried to read a lot about this and found some solutions like using TinyMCE Advanced plugin or adding some lines of code to the functions.php file but none of those solutions worked. They were all posted years ago and TinyMCE has updated many times after that.

TinyMCE Advanced plugin doesn't have an option anymore to exclude tags from this "cleanup" procedure.

Answer 1

tinyMCE.init({ ... verify_html: false ... });