You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#111471 removing empty p tags at the end of an article on save

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by jjonker on Friday, 22 July 2022 15:01 BST

jjonker
Hi! We often notice thst content manager leave empty p tags at the end of the article content. Is there a way to remove thoe empty p tags when the article is saved? So only the empty p tages at the end. Not when they are somewhere in between.

We could do this with some frontend scripting but I think I would prefer to remove them before saving them to the database.

Ryan
Create a file called editor.js in media/jce/js/ and add the following to the file:

tinyMCE.onAddEditor.add(function (mgr, ed) {
  ed.onGetContent.add(function (ed, o) {
    o.content = o.content.replace(/(<p[^>]*>( | |\s|\u00a0|)<\/p>)$/, '');
  });
});

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jjonker
Hii Ryan! I tried that but nothing seems to happen.

There was no folder called js (in media/jce) so I crerated one. Added the editor.js file with the code to it.

We are on Joomla 4,1.5 / PHP 8.0.21
JCE is up to date.

What is the intended function of this script? To remove all empty p tags on save so they are removed before the content is placed in the database? When saving it in the backend? Or is it a script to remove the p tags on the frontend?

When a new p tag is created in the editor it does contain a non-breaking space. Would that influence this script?

Would this only delete the last p tag found or also maybe 3 or 4 empty p tags at the end? Like this:
<p> </p>
<p> </p>
<p> </p>



Ryan
The forum extension has removed the non-breaking space from the script I posted above. Please use the editor.js file in the attached zip.
What is the intended function of this script? To remove all empty p tags on save so they are removed before the content is placed in the database? When saving it in the backend? Or is it a script to remove the p tags on the frontend?
It removes the last empty paragraph in content when the content is extracted from the editor, ie: when saving, or switching to the Code tab.
Would this only delete the last p tag found or also maybe 3 or 4 empty p tags at the end? Like this:

Only the last empty paragraph is removed.

Attachments

editor.zip

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jjonker
Hi Ryan, thanks. It's working now. Great. Is there a way to alter the script so it will remove all empty tags at the end of the article? So even when there are two or three or even more? It can be done on the frontend with this jQuery script:

jQuery(".com-content-article__body").each(function() {
    jQuery(jQuery("p", this).get().reverse()).each(function() {
      if (jQuery.trim(jQuery(this).text()).length === 0) {
        jQuery(this).remove();
      } else {
        return false;
      }
    });
  });
It uses 'each' and then 'reverses' the found p tags to remove them at the end and work it's way back untill the first non-empty p is reached. Not sure how to 'translate;' this to the function.js file...

Ryan
Please try the attached editor.js file.

Attachments

editor.zip

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jjonker
Hi Ryan!

1) Removing multiple empty p tags at the end of the content works great now.

2) When I put place multiple empty p tags somewhere in the middle of the content (like 3 of 4 empty p tags between p tags WITH cntent) this script reduces those multiple p tags to just one empty p tag, Is that what you intended? It think just deleting empty p tags ONLY at the end of the content will be fine. Because those are not very visible tot the user. When a user intentionally add some empty line in between (non-empty) paragraphs they should remain there?


jjonker
I thin may using 'break' in stead of 'continue' (line 24) might do the trick?

Ryan
[quotePost id="111490"]I thin may using 'break' in stead of 'continue' (line 24) might do the trick?[/quotePost]

Yes, that's it!

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jjonker
Thanks Ryan. We can use this on our sites like this.

Would you consider adding an option in the JCE settinfs for this? So we (and other users) don't need to add the file maunally but can just select if they want this option turned on or not? Maybe in the JCE profile?

But again, this works for us ;-) So thanks for taking the time to help out with this!