HTML content models in rich text editors

When writing on a website, the rich text editor (rich text editor) automatically captures and converts your words into HTML code. The rich text editor then allows you to produce interactive and sophisticated content through the repeated performance of this conversion step.

In order for rich text editors to convert content, they need content models to determine how each element appears on-screen. In this article, you’ll learn about HTML content models in rich text editors and how it benefits content creators.

What are rich text editors?

A rich text editor is a tool that enables users to format and change text, photos, videos, links, and other elements without any coding knowledge. rich text editors automatically convert written content into HTML code while you write, and as such are often referred to as WYSIWYG (What You See Is What You Get).

What is an HTML model?

HTML models are a set of rules that define each aspect of the HTML content – from the flow of the text, to the headers and through to the way multimedia content is embedded into the text. Your model determines which items can be nested inside which elements, and how a browser considers text wrapped with a certain tag.

HTML Models are essential in order for text editors to accurately convert input into HTML code. It also makes the content process simpler for users because it enables them to use modeling elements properly, thus preventing unnecessary errors in conversion.

Why you need to understand HTML models

Learning about HTML models doesn’t mean you’ll have to manually type HTML elements into a document or your rich text editor. However, it is important to have some knowledge of it when you’re using a rich text editor, so you can understand what’s being converted and why. This way you know what approach to take when trying to create better web pages when using the rich text editor.

How rich text editors convert to HTML

One common conversion method is through toolbar functions. This way, you can change plain text into an HTML element by selecting and clicking a toolbar button in the rich text editor. 

Some functions, for example, make the text center, right, or left aligned. Others convert uploaded images to data: URI with base64 encoding and embed them in the src property of the HTML img element. The rich text editor calculates the width and length of the image using the size of the image the user chose.

However, calculation is only one part of the process. rich text editors also need to work within the web browser’s HTML concept.

How rich text editors conceptualize HTML

Rich text editors model and conceptualize HTML using your in-built browser. A browser determines what to display based on the files it receives using the browser engine. 

When an HTML document is received by your browser, it parses it, changes it to a web page, and then returns the web page. The browser reads the raw bytes of data, and not the actual characters of code you’ve written. The browser engine then converts the raw bytes to DOM elements. 

The process starts with conversion from bytes to characters, characters to tokens, tokens to nodes, then finally nodes to DOM elements.

You can read more about this process in this article on HTML rendering.

HTML conversion

Converting input into HTML can be done without the user knowing anything about HTML markup elements. The browser engine converts input behind-the-scenes, transforming any input into HTML format.

Online rich text editors use contentEditable or designMode to access the browser’s native HTML editing features. When you paste text into a contentEditable or designMode element, the browser inserts HTML into the element immediately. This conversion is done with the JavaScript execCommand function, which formats the user’s choices. JavaScript then allows you to apply boldface, italics, fonts, and inserts, among other DOM components such as tables and images.

Rich text editors have a user interface

The user interface of a rich text editor can look similar to that of a word processing program, with an empty text area below rows of icons for functions, like boldface, cut/copy text, text alignment, or links. It’s designed to be simple to use, allowing users to create and format content quickly and accurately.

An advanced rich text editor can offer features like spell checking and collaboration tools, and many others.

Image management

Rich text editors also have a header icon for uploading images, which can be added either by importing them directly or by adding the URL link to the image. 

Imported images are converted to a URL in base64. When the user uploads an image, the image’s URL is extracted and embedded in the source property of the HTML <img> tag. The size of the image is autogenerated and embedded into the width and height properties of the HTML img tag, like in the code below:

<img src="img_url" width="10px" height="10px" />

Table management

Tables are created by collecting the data from the editor table and wrapping them in HTML <table> property. In this property, the rich text editor wraps the data for the table header with multiple HTML <th> tags, depending on the number of columns in the table. The rich text editor then wraps the data for the values in the body in the <td> tag, ordering them as the user inputted them. 

Below is an example of how a converted table would look in HTML:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Using a rich text editor

In the above video example, which uses TinyMCE, the text Hello this is a rich text editor was entered, a table was created with two columns using the table widget found in the toolbar, and then an image was uploaded using the image widget found in the toolbar. 

Finally, by clicking Show HTML code, all the inputs entered earlier were converted into HTML code, then displayed on a browser alert.

The HTML Model is important to rich text editors

Rich text editors are essential for developers and content creators alike when producing highly formatted, attractive pages and sitesAs a developer, by understanding how rich text editors work you better  appreciate all the tasks a rich text editor performs and  what they do for your users.

If you’re looking for a rich text editor, TinyMCE is an open-source WYSIWYG editor, which allows anyone to create visually complex, web-ready content. You can learn more about TinyMCE in its official documentation. Or, sign up for a FREE API key to get started right away.