Did You Know? CKEditor Is Web Standards-Compliant

Today we will publish the first in a series of Did You Know blog posts that will hopefully improve people’s understanding of CKEditor. Many issues in the community forums and dev site turn out to be false alarms, forcing the core team to spend time explaining CKEditor’s internal mechanism and how it interacts with browsers and websites. WYSIWYG web text editors are the proverbial black sheep when it comes to taking the blame for things they are not responsible for, so we hope this column will shed light on common misconceptions.

Web Standards

Did you know that CKEditor generates Web Standards-compliant code? Web Standards are a set of guidelines agreed upon by Internet authorities that normalize how websites are designed. These Internet Standards make it easier for websites and web-dependent tools to function online.

Bad code would affect the functionality of various Internet facets, like search engine crawlers, bots and Accessibility tools. With over 7.5 million downloads it's our responsibility to keep things clean. CKEditor must generate proper HTML or the net would quickly find itself inundated with non-compliant code. 

No, it's not broken!

One of the most frequent complaints we hear involves HTML markup being modified by CKEditor. “Why is it changing my code,” is the usual grumble. The answer is simple: because your code was probably not Web Standards-compliant. The effectiveness of the corrections varies depending on the extent of the mistake, but the end result is always Standards-compliant code.

Here's an example of how CKEditor might modify invalid code:

Input:
<em>Sample text.

Fixed output:
<p><em>Sample text. </em></p>

In the above example, CKEditor closed the <em> tag and put the sample text in a paragraph block, which brings us to another issue: inline and block-level tags. 

According to Web Standards, inline elements like <strong>, <em> or even <img> must reside inside block level tags (<div> and <p>). CKEditor will automatically move tags around if they break those rules. Here's an example:

Input:
<p>Line 1</p>
<img>
<p>Line 3</p>


Fixed output:
<p>Line 1</p>
<p><img /></p>
<p>Line 3</p>

These are only a few examples, which you can test on our demo page.

The dev site has numerous tickets submitted by individuals trying to use CKEditor against the recommendations of Web Standards, but we hope this clarifies how CKEditor works. Let us know what you think by leaving comments below.