How to: Prevent span tags being stripped from text editor
Below is an extract from our ‘Tips & Tricks‘ page.
When using span tags in the text editor with Tiny MCE Advanced plugin active (may apply to MCE generally), span tags were being stripped when switching from text editor to visual editor. To prevent this, the following code was added to ‘functions.php’
An example of this was in writing the ‘How to: Change ‘Read More’ text on the Blog Module to an Animated Button’ where the ‘span style’ and ‘span data-icon’ tags were used to insert and style an icon between two words (unicode & icon):
<p>The button expands to the left on hover which allows it sufficient space to display the unicode <span style=”color: #933300; font-size: 12pt; font-weight: 500;vertical-align:bottom;”><span data-icon=”9”></span></span> icon to the right. See below:</p>
Updating from the text editor produced the desired result but as soon as switching to the visual editor (without making any changes at all), the ‘span style’ and ‘span data-icon’ tags were stripped
Please be aware that if copying the above example to use the ‘span style’ and ‘span data-icon’ tags that the inverted commas within the span tags will need to be retyped in your text editor (they do not reproduce properly in the above font)