We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

[SOLVED] TinyMCE is removing DIVS from the code

    • 10405
    • 288 Posts
    galahad5 Reply #1, 14 years, 5 months ago
    There seems to be an issue with the TinyMCE editor. In the page code I am using DIVS to position a Javascript based slideshow. The HTML used is as follows:

    <div id="fadeshow1"></div>
<div id="fadeshow2"></div>
<div id="fadeshow3"></div>


    When any of the page content is edited using the TinyMCE editor and saved the DIVS are removed. It may be because the DIVS are empty but that is how they should be for this particular Javascript.

    As the client will be using the editor to make changes to the content this will cause a problem if the DIVS are removed every time any changes are made.

    Has anyone else had this problem? Any suggestions welcome.

      • 5340
      • 1,624 Posts
      cipa Reply #2, 14 years, 5 months ago
      I noticed this issue and I solved it by creating a Mini Textarea TV.

      In my case I wanted to do 
      <div>[!eForm...!]</div>


        Responsive CSS Grid: cipalabs.com/projects/metal/
        Blog: MODX Tutorials & Articles
        • 4310
        • 2,310 Posts
        bunk58 Reply #3, 14 years, 5 months ago
        I’ve had this before with empty <div>’s.
        Tiny doesn’t think you should have them.
        Pretty sure there’s a config setting that’ll rectify it.
        Can’t remember what it is though huh
        I’m sure someone else with a better memory will chime in laugh
          • 26931
          • 2,314 Posts
          anonymized-26931 Reply #4, 14 years, 5 months ago
          Pretty sure there’s a config setting that’ll rectify it.
          i guess "Elements" -> "Manage Elements" -> "Plugins" -> "TinyMCE Rich Text Editor" -> "Configuration" -> "Cleanup" -> disabled ( but test this setting beforehand )

          i would rather create an extra template for this page with TVs, so that it’s going to be "client-proofed".
          mixing TinyMCE, div-blocks & your client is definitely going to blow up in your face at one point

          *edit: or you try cipa’s suggestion and play around with placing a chunk in your content area
            • 4310
            • 2,310 Posts
            bunk58 Reply #5, 14 years, 5 months ago
            sharkbait is right.
            I had a site with an empty set of <div> tags to load some Ajax content into.
            As soon as my back was turned it broke.
            Of course it was Tiny removing the tags when the client went to edit.
            I disabled the Rich Text setting and switched of Tiny for that page.
              • 10405
              • 288 Posts
              galahad5 Reply #6, 14 years, 5 months ago
              Thanks for all of your suggestions.

              I tried creating a new chunk to hold the DIVS and called it on the page and that seemed to work. smiley

                • 25750
                • 7 Posts
                rushtrack Reply #7, 14 years, 4 months ago
                Quote from: sharkbait at Nov 13, 2009, 06:44 PM

                Pretty sure there’s a config setting that’ll rectify it.
                i guess "Elements" -> "Manage Elements" -> "Plugins" -> "TinyMCE Rich Text Editor" -> "Configuration" -> "Cleanup" -> disabled ( but test this setting beforehand )

                i would rather create an extra template for this page with TVs, so that it’s going to be "client-proofed".
                mixing TinyMCE, div-blocks & your client is definitely going to blow up in your face at one point

                *edit: or you try cipa’s suggestion and play around with placing a chunk in your content area

                This works perfectly as well. Thanks.

                  • 19889
                  • 616 Posts
                  mmjaeger Reply #8, 14 years, 4 months ago
                  I’m not sure anymore but I think this may fix the issue with tinyMCE: 
                  <div id="fadeshow1"> </div>
                    • 22089
                    • 1 Posts
                    okneb Reply #9, 14 years ago
                    TinyMCE removes empty divs by default, it can be fixed by adding:
                    extended_valid_elements : "div[*]"

                    to the configuration.

                    In modx go to Manage Elements > Plugins > TinyMCE > Configution
                    and add it to Custom Parameters.

                      • 19369
                      • 1,098 Posts
                      microcipcip Reply #10, 13 years, 10 months ago
                      Hi, I have a issue with TinyMCE. I try to add code like this:
                      <pre>
<ul>
<li class="active"><a href="index.htm">Home</a></li>
<li><a href="news.htm">News</a></li>
</ul>
</pre>

                      But class="active" disappear.
                      I have tried to open xconfig.js and add this line
                      var tinymce_extended_valid_elements = "div[id|dir|class|align|style],span[id|dir|class|align|style],ul[id|dir|class|align|style],li[id|dir|class|align|style]";


                      But doesn’t change anything. I can’t use the "html" button because I need to show the code as it is. Does anyone know how to fix this issue?
                        Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)