HTML code disappears when changing from text to visual editor

[slucide]

Hi there,

I’m having a strange issue with the <a class> and <span class> codes disappearing from text editor when switching to visual. I was trying to implement a simple flexbox container on a post with a link on each block but the following line of code always disappears: "<a class="wrapping-link" href="https://thecodeteam.com/projects/rex-ray/"></a>" and the <span class="centered project-image-bg rex-ray-image"></span> when switching back.

Tried to deactivate all plugins already but the issue still appears so I’m wondering if it’s some kind of security feature of the theme that’s preventing this type of code.

Here’s the full example:

    <div class="container">
      <div class="grid-row">
        <div class="grid-item">
          <a class="wrapping-link" href="https://thecodeteam.com/projects/rex-ray/"></a>
          <div class="grid-item-wrapper">
            <div class="grid-item-container">
              <div class="grid-image-top rex-ray">
                <span class="centered project-image-bg rex-ray-image"></span>
              </div>
              <div class="grid-item-content">
                <span class="item-title">REX-Ray</span>
                <span class="item-category">Infrastructure as Code</span>
                <span class="item-excerpt">REX-Ray is a container storage orchestration engine enabling persistence fo...</span>
                <span class="more-info">View Project <i class="fas fa-long-arrow-alt-right"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

After changing to visual editor and back to text editor it looks like this:

 
<div class="container">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-wrapper">
<div class="grid-item-container">
<div class="grid-image-top rex-ray"></div>
<div class="grid-item-content"><span class="item-title">REX-Ray</span>
<span class="item-category">Infrastructure as Code</span>
<span class="item-excerpt">REX-Ray is a container storage orchestration engine enabling persistence fo...</span>
<span class="more-info">View Project <i class="fas fa-long-arrow-alt-right"></i></span></div>
</div>
</div>
</div>
</div>
</div>

Strange that some span class elements remain while others disappear. This is quite frustrating since I need to check back on visual editor if all images are working and can’t have this code break all the time.
Hope you can help me in this case.

Best regards

[prakash_s]

Hello @slucide,

Thanks for writing to us.

It might be the issue of the HTML markup syntax error or plugin conflict issue, CSS/JS customization issue. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1. Testing for Plugin Conflict
2. CSS/JS Customization
3. Version Compatibility
4. Disabling Cache

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[slucide]

Hi, thanks for the reply. I found out that it has something to do with how Wordpress core functionality treats raw html code and that it’s not plugin related. Found out that by putting empty values like ­ or   in the code helped with this issue. It’s not visible but the code still remains.

[ruenel]

Hello Kosta,

Please use the Raw Content or the Classic Content element instead. You cannot see any preview of the code in the builder yet your codes will surely be preserve when viewing the page in live view mode.

Best Regards.

[slucide]

Hi ruenel,

you mean to put everything into [code] tags? Tried it already but didn’t work. After changing to visual editor it all got deleted again.

By the way I found a solution and the culprit: TinyMCE is stripping off empty span tags and I got it deactivated by implementing this code into the X child theme’s function.php:

//This code disables span tags removal on post editor in visual view
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
} add_filter('tiny_mce_before_init', 'override_mce_options');

Best regards

[marc_a]

Hi Kosta,

My colleague advises you to use the Raw Content or Classic Raw Content because it will not change any of your HTML code unlike using the text editor.

On the other hand, we’re glad that you’re able to find an alternative solution to your problem. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.