When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code structure, containing numerous empty tags such as:

<p></p>

<p>&nbsp;</p>

and even:

<p><span style="color: #008000;"><span style="font-size: medium;"><strong> </strong></span></span></p>

Is there a way to clean up this code using JavaScript or CSS? Or should I not worry about it since I have no control over how the client uses the editor?

UPDATE: I found a solution provided by kitgui.com - you can try out their plugin at http://code.google.com/p/jquery-clean/ - it works wonders.

javascripthtmlcssjoomlawysiwyg

Answer №1

If you want to improve the cleanliness of your HTML output, consider implementing postprocessing during the saving process with the Tidy class. With numerous configuration options available, Tidy allows you to efficiently tidy up empty tags using just a few lines of code.

For example:

<?php
$html = "MESSY HTML HERE";
$tidy = tidy_parse_string($html);
$tidy->cleanRepair();
echo $tidy;
?>

Answer №2

A helpful suggestion was provided by David regarding PHP, but it's unclear if you are using that language or not. If you're open to trying JavaScript post processing, consider applying the following code snippet at the end before saving:

http://code.google.com/p/jquery-clean/

Give it a try and see if it helps.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

javascriptjquerywordpresshtmlresponsive-design

Express.js Server Side Rendering - GET request for '/json/version/'

I have a running express server that pre-renders my react application. The routes file matches the HomeContainer to the base route / and all other routes match to the page not found. import HomeContainer from 'containers/home-container/home-container ...

javascriptjsonnode.jsreactjsexpress

IIFE and the Twitter share button are a powerful duo

As I experiment with this quick creation of mine, two questions have arisen. The first one is, how can I encapsulate all the JS code within an IIFE without breaking it? The second question is about finishing the twitter button to enable sharing the act ...

javascripthtmlapitwitteriife

How to create flexible, non-url-changing layout states with angular-ui-router?

My Objective I am working with two different styles of display: "Normal": [ Header | Body | Footer ] - primarily used for most views "Discreet": [ Body ] only, centered on screen - ideal for states like login/register, errors etc. These display styles ...

javascriptangularjsroutesangular-uiangular-ui-router

The dropdown menu in codeigniter is not displaying the selected option

When using a drop-down button to select an option from the available choices, I encountered a problem where the selected option was not displayed in the box. Additionally, it only allowed me to make one selection. The data for the drop-down menu is retriev ...

htmlcodeigniter

Ensure that the input remains below ten

My goal here is to ensure that the value in an input element is a non-zero digit (0<x<=9). Here's the HTML tag I'm using: <input type="number" class="cell"> I've experimented with various JavaScript solutions, but so far none h ...

javascriptjqueryhtml

Using Rails to Pass Front-End JavaScript Data from an External API to the Controller

I need to retrieve coordinates from an external API, specifically the Google Maps API, and then send it to my controller. However, I am encountering a 500 internal server error when using jQuery/Ajax for this task. Researching the issue online suggests tha ...

javascriptruby-on-railsajaxgoogle-mapsyelp

Leveraging the const keyword within a for loop

Imagine having the following snippet of code: for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **const** foo = Collection.find({index:i}); } vs for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **let** foo = Collection ...

javascriptnode.jsmemory-leaksgarbage-collection

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

The documentation for Next.js mentions that the src/pages directory can be used as an alternative to /pages. However, I encountered a problem when moving my custom _app.tsx and _document.tsx files into the src folder, as they were being ignored. If you cr ...

javascriptreactjsnext.js

The content on Twitter Bootstrap remains consistent

While using Twitter Bootstrap modals for updating contacts, I encountered some issues. The modal consistently displays the information of the first contact, whereas when displaying the information outside the modal, everything appears correctly. <?php ...

phpjavascripttwitter-bootstrapmodal-dialog

AngularJS Login Popup with SpringSecurity

I have successfully integrated spring security with my AngularJS webpage utilizing Rest API. However, I am facing an issue where every time I attempt to log in using the rest api from my customized login page, it prompts me for the login credentials in a p ...

javascriptjavaangularjsspringspring-security

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

javascripthtmlcsstailwind-css

Server nearby designated to handle requests to the api

Currently, I am working on a project involving automation. Within Adobe CEP, there is a local server that operates on Node.js/Express. My goal is to send an API request from a cloud server to this local server. How can I establish a connection between my l ...

javascriptnode.jsapiexpressserver

Tips for retrieving a variable from a $.getJSON function

My question is similar to this one: How can I return a variable from a $.getJSON function I have come across several duplicates on Stack Overflow, but none of them provided a satisfactory answer. I understand that $.getJSON runs asynchronously, and I hav ...

javascriptjqueryajaxjsonasynchronous

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

The for loop does not pause until the ajax response is received

When I enter the for loop, an ajax call is made. However, the for loop does not wait for the ajax call to receive a response before incrementing the value, causing the response to update to the wrong div element. For example: Let's say we have ' ...

javascriptajax

Position the vertical bar directly adjacent to the form input field

Looking for assistance with creating a unique webpage layout that includes a form where the employee ID is visually separated from the rest of the content by a vertical bar extending across the entire page. However, my attempts to achieve this using a gr ...

javascriptcssreactjs

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...

javascripthtmlxmlxslt

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

javascriptjquerycss

an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element: <li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li> The page contai ...

javascripthtmlcss