Types of Rich Text Editors | Shreya

Post

editor-img
Shreya
Oct 31, 2022

Types of Rich Text Editors

In the previous post I explained what are RTEs and why are they used, in this post, I am going to throw some light on the types of RTEs, and will make you familiar with the sample content format.

https://fifo.im/p/35ghmd1uxln0

HTML based RTE

The HTML-based Rich Text Editor (RTE) field enables users to input different types of content such as text, images, videos, and so on. When you add an HTML-based RTE field in a content type, it displays a text area with editing and formatting options on the entry page.

This field allows you to edit and format content entered in the field without using HTML tags. It enables content contributors easily create and publish HTML anywhere: on the desktop and on mobile.

<p>This is content in HTML RTE</p>

JSON based RTE

In the JSON Rich Text Editor, each paragraph is a block; each block is an array; each array has multiple spans of text objects, storing different nodes of text. It returns clean data, making it easier to process in the backend.

The JSON RTE is composed of Blocks that contain text within them.

JSON-formatted content helps developers render content to any front-end framework with immense flexibility and interoperability.

[ { type: 'paragraph', children: [ { text: 'This is editable ' }, { text: 'rich', bold: true }, { text: ' text, ' }, { text: 'much', italic: true }, { text: ' better than a ' }, { text: '<textarea>', code: true }, { text: '!' }, ], }, { type: 'paragraph', children: [ { text: "Since it's rich text, you can do things like turn a selection of text ", }, { text: 'bold', bold: true }, { text: ', or add a semantically rendered block quote in the middle of the page, like this:', }, ], }, { type: 'quote', children: [{ text: 'A wise quote.' }], }, { type: 'code', children: [{ text: '<Code block/>' }], }, { type: 'paragraph', align: 'center', children: [{ text: 'Try it out for yourself!' }], },]

HTML RTE or JSON RTE

The JSON Rich Text Editor stores content in plain text format, which can be understood and processed by all programming languages. Whereas the HTML RTE is limited and constrained to HTML markup.

JSON-formatted content helps developers render content to any front-end framework with immense flexibility and interoperability.

With the JSON-based editor, the developers can handle the HTML component, and content managers can undividedly focus on styling and generating high-quality content.


Tagged users
editor-img
Aryan Agarwal
@aryankush25
Technical Lead | Driving Innovation at Glue Labs | Ex - Software Development Engineer at GeekyAnts Just Learning New Things!! 😉
Checkout related posts on: