Jump to:

5514 Posts in 1733 Topics by 1219 members

Customising the CMS

SilverStripe Forums » Customising the CMS » tiny mce leaving empty <p> tags

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 7465 Views
  • jkd77
    Avatar
    Community Member
    12 Posts

    tiny mce leaving empty <p> tags Link to this post

    I've modified code to allow js script links to be added to each page's header area via the admin area and a new tab / htmlText area.

    This is working fine until I enter a js link then remove it using the tiny mce html editor. It appears to be gone (even the pesky hard to notice blank space) but upon viewing the code of the page after a refresh there is an empty paragraph element left behind. Is there something going on in sapphiremce_cleanup that is causing this?

    To enable using script tags w/ tiny i had to modify this file: tinymce.template.js with:

    script[charset|defer|language|type|src]

    at the end of valid_elements.

    Also once a script element has been entered and I exit the html editor window, I open it back up and an empty <br/> tag has been placed in the code window in front of the script tag. Though upon reviewing the page code this does not seem to appear.

    Any help would be greatly appreciated!

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: tiny mce leaving empty <p> tags Link to this post

    This is also occurring with a previously installed HTMLtext area designed to allow content to be added to a right side column for each page. Every page that has this ability has an empty <p> element inserted for no apparent reason (I only discovered this upon looking through the DB). When I open the admin side editor and remove the space that denotes it, save & publish, change pages in the editor, then return to the page I just edited - the space (aka empty paragraph) has returned.

    The Tiny MCE forum has revealed someone with a similar issue: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=11981

    But the described remedy of setting certain init values doesn't seem to help - since they are already set as described:

    "There are some settings in TinyMCE which might cause your experience, such as force_p_newlines (which defaults to "true"), force_br_newlines (which defaults to "false") and forced_root_block (which defaults to "false")."

    Since these settings appear to be as desired as described by the Tiny Mce descriptions of these settings I can only assume something else is causing this.

    Anyone?

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: tiny mce leaving empty <p> tags Link to this post

    It seems the editor automatically puts an empty element in the HTMLText window to prepare for keying of content. To test this I selected a new element from the Tiny mce pulldown (an H2 element), and clicked in the edit window without entering content, then saved. Low and behold there is now an empty h2 element being created. Is there any way to cleanup empty elements before storing the content in the db?

  • jkd77
    Avatar
    Community Member
    12 Posts

    Re: tiny mce leaving empty <p> tags Link to this post

    Update:

    At this point I'm trying to add a string.replace or regexp to the sapphiremce_cleanup() function of jsparty/tiny_mce_improvements.js to get rid of empty elements.

    I've tried various things and nothing seems to work. It either does nothing OR removes all the closing tags.

    function sapphiremce_cleanup(type, value) {
       if(type == 'get_from_editor') {
          // replace indented text with a <blockquote>
          value = value.replace(/<p [^>]*margin-left[^>]*>([^\n|\n\015|\015\n]*)<\/p>/ig,"<blockquote><p>$1</p></blockquote>");
       
          // replace VML pixel image references with image tags - experimental
          value = value.replace(/<[a-z0-9]+:imagedata[^>]+src="?([^> "]+)"?[^>]*>/ig,"<img src=\"$1\">");
          
          // Word comments
          value = value.replace(new RegExp('<(!--)([^>]*)(--)>', 'g'), "");
             
          // kill class=mso??? and on mouse* tags
          value = value.replace(/([ \f\r\t\n\'\"])class=mso[a-z0-9]+[^ >]+/ig, "$1");
          value = value.replace(/([ \f\r\t\n\'\"]class=")mso[a-z0-9]+[^ ">]+ /ig, "$1");
          value = value.replace(/([ \f\r\t\n\'\"])class="mso[a-z0-9]+[^">]+"/ig, "$1");
          value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");
          value = value.replace(/ >/ig, ">");
       
          // remove everything that's in a closing tag
          value = value.replace(/<(\/[A-Za-z0-9]+)[ \f\r\t\n]+[^>]*>/ig,"<$1>");
          
          //remove empty elements - 06jan09
          value = value.replace(/<[^>]*><\/[^>]*>/ig,""); //this removes all the closing tags for some reason

       }

       if(type == 'get_from_editor_dom') {
          var allImages =value.getElementsByTagName('img');
          var i,img;

          for(i=0;img=allImages;i++) {
             img.onresizestart = null;
             img.onresizeend = null;
             img.removeAttribute('onresizestart');
             img.removeAttribute('onresizeend');
          }

          var allDLs =value.getElementsByTagName('img');
          for(i=0;img=allDLs;i++) {
             if(img.className.match(/(^|\b)specialImage($|\b)/)) {
                img.onresizestart = null;
                img.onresizeend = null;
                img.removeAttribute('onresizestart');
                img.removeAttribute('onresizeend');
             }
          }
          
       }
       return value;
    }

    Thoughts anyone? Anyone?

    7465 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.