Allowing empty divs in TinyMCE

Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

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

Please login to post a reply