Rich text editors (RTEs) provide word processing capability to the internet. Many RTEs are open-source and free, and are designed to be easy to use. Some of the better-known RTEs include CKEditor, TinyMCE, and Quill. RTEs help content creators and writers properly format text on websites. And formatting is essential for websites. Without exact formatting, content renders slowly, or not at all.
Since HTML is used to create most websites, a key factor in using RTEs is how clear their formatting translates through the browser. So what do we call exact formatting, so it can be applied consistently? The answer is compliant HTML. Apps and browsers that work with compliant HTML are able to process, render, and load content more quickly.
HTML-compliant resources are available for a range of web browsers, including desktop browsers like Internet Explorer, Firefox, and Google Chrome as well as specialty browsers on digital TVs and other devices. But this article examines how RTEs work with HTML compliance. It also offers suggestions on choosing the right RTE for your web projects, and some best practices to ensure HTML compliance in your projects.
HTML compliance and TinyMCE
When it comes to HTML compliance and Rich Text Editors, a Rich Text Editor offers formatting options including bold and italic styles, font color and size, bulleted lists, and hyperlinks. They’re also known as WYSIWYG (What You See Is What You Get) editors, because the formatting applied is immediately visible.
TinyMCE is an open-source WYSIWYG that creates editor instances from HTML text area fields or other HTML elements. It works with JavaScript frameworks including React, Vue.js, AngularJS, and Bootstrap. TinyMCE provides several features to meet the challenges of HTML compliance. Here’s how TinyMCE, as a useful rich text editor, meets HTML compliance challenges:
What prevents HTML compliance?
There are three common challenges to maintaining HTML compliance in an RTE. Here’s how RTEs solve these challenges:
1. Multiple HTML versions
Most RTEs allow you to add pages with different versions of HTML, but they might not support all the HTML tags used. Even if all the HTML tags were added to your editor, it might display HTML content differently than your web browser. Some examples of unsupported tags include:
<base> with href
<div> with CSS attributes like border, align, and float
<li> with CSS attribute like list-style-image
<margin>
<tab>
<table> with cols attribute
<td> with border color and nowrap attributes
!important declaration
word-wrap
Break-word
CSS3 -shape
<ui> with type attributeSometimes copying content from an old version of a site and pasting it to a newer version might break HTML compliance, because the newer version offers different functionality. For instance, HTML tags which were not supported in the old version might be supported in the newer version.
Importing documents from certain software or from a local system might also cause problems, because updates to those programs or systems may change functionality. For instance, a large file size that wouldn’t import in the older version, might now be allowed in the newer version.
Normalizing between HTML versions
As a solution to this HTML Compliance challenge, TinyMCE uses advanced JavaScript techniques and browser detection to smooth inconsistencies and behavior between browsers to ensure a uniform user experience. These techniques ensure TinyMCE remains compatible with most browsers and operating systems including Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Internet Explorer, and Opera.
2. Pasting text into an RTE
Content is frequently created in a desktop word processor, such as Microsoft Word, then copy-pasted directly into an RTE. However, the content might not convert properly to HTML, since formatting standards vary between RTEs.
Cleaning pasted content
One way to avoid this issue is to copy-paste the text into Notepad or another text editor, first, then paste it into the RTE. However, a better option is to seek out a rich text editor that can detect incoming content, filter it, and clear any unwanted formatting during the paste process. TinyMCE has a plugin called PowerPaste, which cleanly copy-pastes from MSWord, GDocs and Excel.
3. Combining compliance and page authoring
It may be better to use a specific HTML checker to ensure proper functioning. However, such programs are frequently used in batches to validate a large number of files, which can lead to multiple error messages. This data could also provide signs of systematic faults that need to be addressed in workflow operations.
Checking for valid HTML
While a RTE is not an HTML editor or browser, an effective RTE offers the ability to validate HTML. TinyMCE has an API for managing valid HTML. Several other plugins are also available for ensuring HTML translated from the RTE by the browser functions properly:
- CSS list-style number formats and bullet lists
- An anchor/bookmark button that marks the editor’s cursor insertion point
- Automatic hyperlinks when a user enters a valid URL
- Toolbar button that allows users to view and change HTML code
- Customization of images
- Font, bold, italics, underline, strike-through, and alignment components
- Table editing capabilities of cells, rows, and columns
- Automatic import of CSS classes
Other essential HTML compliance features TinyMCE offers
Accessibility checker plugin
Users who rely on assistive technologies, such as screen readers, need to be able to access your content. An RTE can confirm that your content can be viewed or heard properly by those with disabilities and correct errors as needed.
Link checker plugin
This feature determines whether a link in your content is accurate and alerts you if it suspects that the link is invalid. A link checker can be a huge time-saver for content creators, especially when dealing with imported content.
Spell checker plugin
Spell checkers in native browsers can differ in terms of the languages available and the technical terminology used. An RTE should be able to tell when to correct jargon and when to leave it alone.
Best practices for HTML compliance
There are some best practices you can follow to ensure a better result from your RTE.
Server-side includes
For improving HTML compliance on sites, server-side includes (SSIs) retrieve common functionality such as headers and footers, and can be useful for keeping HTML components in a comprehensible format. However, if an SSI is not processed, this may cause validation issues.
Content management systems
Another option is a content management system (CMS) or equivalent server-side technology, such as obtaining resources from a database.
Clear warning messages
Additionally, your RTE should warn you (using red underlines or other notifications) if it finds issues with content. Look for those warnings when you add content directly to an RTE.
Along with user-entered data, rich text fields store HTML tags that are required for formatting. Make sure to set a large enough size for both the HTML tags and the user-entered data when defining the maximum size for your field.
Conclusion
RTEs are essential to proper formatting and functioning of web content, but they need to work well with the underlying HTML code of browsers and applications. If you’re aware of the potential challenges and follow best practices for using and formatting content, then you’ll ensure that your projects perform effectively and are free of errors.
For an RTE that ensures HTML compliance, try TinyMCE. The open-source software is designed to smoothly work with HTML, and it offers multiple features to improve the look and functionality of your content.
