Allowing empty divs in TinyMCE

Vote:

I'm having some trouble getting TinyMCE (EPiServer 7.13.1) to allow empty div elements.

I've tried creating a TinyMCEPluginNonVisual-class and configuring extended_valid_elements, but that fails for div specifically. When doing the exact same thing for a different element name ("divi" in the example below), that works so I assume there's some default configuration for div that conflicts with my extended configuration. Any ideas what I'm doing wrong?

   [TinyMCEPluginNonVisual(AlwaysEnabled = true,
     PlugInName = "TinyMceExtendedValidElements",
     DisplayName = "Customized editor",
     Description = "Custom editor without h1, h4, h5 and with extra css classes for layout",
     EditorInitConfigurationOptions = @"{
        theme_advanced_blockformats : ""p,h2,h3"",
        extended_valid_elements: ""iframe[src|frameborder=0|alt|title|width|height|align|name], div[id|class|style], divi[id|class|style]"",
        body_id : ""mainbody""}")]
    public class EditorSettings { }

Also, here's the relevant row from EPiServer.config:

The reason we need empty div tags is due to embed codes from external systems.

#111740

Oct 20, 2014 12:49

Vote:

I know this is an old post but we have the same issue with TinyMCE. It seems to be a bug in TinyMCE and has been fixed.

TinyMCE bug: http://www.tinymce.com/develop/bugtracker_view.php?id=5269 and http://www.tinymce.com/forum/viewtopic.php?pid=101363#p101363 and Git hub fix : https://github.com/tinymce/tinymce/commit/0eb73591f0d573bd2aee6a07a16ea1d0f51d6742

What makes it strange is that EPiServer says the current TinyMCE version is 3.5.11 ( http://world.episerver.com/documentation/Items/Developers-Guide/EPiServer-CMS/75/Editing/Customizing-the-TinyMCE-editor/ ) so that should indicate that the bug shouldn't be there anymore. But when looking at the EPiServer tiny_mce_src.js it says version 3.9.3 and release date 2010-12-20 but the fix is done 2012! So something isn't correct here.

We found 2 workarounds for our 3rd party code. Replace the div element with p element. Other workaround is to add an empty p element inside the div so that it wont get removed and also wrap the script element inside div as otherwise it will be wrapped inside p element. Like following:

<div data-somecustomvar="1234567890" style="width:400px; height:283px;" class="someclass"><p> </p></div>
<div>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>
</div>

#117067

Feb 11, 2015 7:09

A.D

Vote:

Howdy,

Just ran into this issue myself. I think I finally found a solution (after banging my head against the wall for some considerable time).

We're on CMS 8.0 and our TinyMCE is version 3.9.3.

See http://www.tinymce.com/wiki.php/Configuration3x:valid_elements

See the last 2 control characters in the table: "-" and "#". The minus sign removes empty elements, the hash 'pads' them with a non-breaking space.

Now have a look at the default rule set, which includes "-div"! So I tried adding #div[*] to the extended_valid_elements, like so:

  [TinyMCEPluginNonVisual(AlwaysEnabled = true, ServerSideOnly = true, EditorInitConfigurationOptions = "{ extended_valid_elements : '#div[*]' }")]
  public class TinyMCEExtendedValidElements
  {
  }

Seems to work okay - as mentioned it just adds a   in the empty element.

#123676

Jul 15, 2015 6:48

Try our conversational search powered by Generative AI!

Allowing empty divs in TinyMCE