Home → How Do I... →

Prevent Cascade from tidying up empty spans

• Edit

Jason Aller

16 Jul, 2014 03:24 AM

I've had trouble recently using html like the following in WYSIWYG regions:

     <div class="row">
            <div class="col-sm-3">
                <p class="form-control-static">Interest Rate</p>
            </div>
            <div class="col-sm-2">
                <span id="reportInterestRate" class="form-control-static"></span>
            </div>
            <div class="col-sm-7">
                <p class="form-control-static"></p>
            </div>
        </div>

turns into

<div class="row">
<div class="col-sm-3">
<p class="form-control-static">Interest Rate</p>
</div>
<div class="col-sm-2"></div>
<div class="col-sm-7"></div>
</div>

You will note that there is no longer any element to be found with an id of "reportInterestRate", nor is there a paragraph with class "form-control-static". Is there anyway to keep this content in the WYWISYG region, or do I have to stick it in a block and then attach the block to the page?

1. 1 Posted by christianco on 16 Jul, 2014 05:20 AM

   

   looks like black magic to me. Have you reported it to the authorities?

   c

   • Edit

2. 2 Posted by Ryan Griffith on 16 Jul, 2014 12:50 PM

   

   Hi Jason,

   This is actually an issue with TinyMCE itself and the way it handles certain elements when they are empty. You will notice this content is removed as soon as you hit Insert/Update from the HTML editor. From what I am seeing while testing, it looks like everything but div tags are removed when empty.

   Oddly, every proposed solution I see out there mentions using *[*] when configuring TinyMCE to allow additional empty tags, but that certainly does not work because we are using it.

   The best workarounds I can come up with is to:

   • Add content inside of, or directly after, the empty tag. This could be as simple as a space  .
   • Switch over to using a <div> where possible.
   • Use an XML Block to avoid TinyMCE all-together.

   Please let me know if you have any questions.

   Thanks!

   • Edit

3. 3 Posted by Jason Aller on 16 Jul, 2014 03:14 PM

   

   What would be the best way to write this up as a feature request at ideas.hannonhill.com?

   I view this bug as detracting greatly from one of Cascade's stronger features - that of being language and framework agnostic.

   • Edit

4. 4 Posted by Ryan Griffith on 16 Jul, 2014 03:34 PM

   

   Hi Jason,

   I can definitely understand the inconvenience here.

   Unfortunately, I am also seeing this behavior in the latest release of TinyMCE (v4.1.2), so I'm not 100% sure if this can be addressed without making changes to the core library. I can certainly double-check with the developers to see if they can provide any additional information.

   That being said, please feel free to post a suggestion on our Idea Exchange so we can better track the popularity of this behavior and prioritize accordingly. Perhaps you could title/summarize the suggestion as "*Ensure TinyMCE does not remove empty HTML tags*" and mention

   As a side note, I do recall a few clients bringing issues with using the empty <i> tags with Bootstrap (or Font Awesome); the proposed solution was the same as I provided here.

   Please let me know if you have any questions.

   Thanks!

   • Edit

5. 5 Posted by Jason Aller on 16 Jul, 2014 03:40 PM

   

   At some point it is time to tell TinyMCE, "It's not you, it's me..."

   • Edit

6. 6 Posted by Ryan Griffith on 16 Jul, 2014 04:08 PM

   

   Hi Jason,

   I wanted to follow up to let you know I've posted on the TinyMCE forum regarding this behavior. I have also asked our developers. I will let you know as soon as I have any additional information.

   Thanks!

   • Edit

7. 7 Posted by Ryan Griffith on 04 Aug, 2014 01:10 PM

   

   Hi Jason,

   I'm not sure if you had a chance to take a look at the forum post I created on the TinyMCE forum, but it looks as though the behavior was addressed in TinyMCE 4.1.2 and there would be no fixes for this behavior in 3.x.

   That being said, I did confirm that we can retain the empty tags using TinyMCE 4.1.2 with a couple of configuration tweaks. Once we are able to upgrade to the latest version of TinyMCE, we should be able to provide some more flexibility for empty tags.

   Please let me know if you have any questions.

   Thanks!

   • Edit

8. Ryan Griffith closed this discussion on 20 Aug, 2014 02:00 PM.