Allowing rich-text editing within DatoCMS

Everyone hates WYSIWYG editors: developers know they produce dirty code, designers fear the introduction of unwanted styling, editors struggle to use them. Sure, DatoCMS features a WYSIWYG editor since day one, but we want to keep it simple and lightweight: no inline images or other potentially dangerous stuff.

In DatoCMS you can achieve rich-content editing using a specific type of field called (duh) Rich text field. The idea is to give your authors the choice to compose their content by alternating certain blocks (e.g. Text, Image, Video, etc). Authors can choose and populate these blocks and reorder them as needed. This gives authors a lot of freedom to organise their content, much like Medium editor does, while keeping the content clean and structured.

1484864094 screenshot 2017 01 19 23 14 04 png?w=652&fit=max

How to build a Rich text editor

Suppose we have an "Article" item type, and we want to add a Rich text field to manage its content:

1483890764 screenshot 2017 01 08 16 33 13 png?w=652&fit=max

The first step is to define which are the different kind of basic blocks you want your authors to alternate. In this case, we want our content to be a composition of:

  • Text
  • Quotes
  • Videos
  • Images

Seems like a quite flexible layout for an article content, isn't it?

Now, what you need to do is to head over the Admin tab of your backend, and create an item type for each one of these blocks. The Quote block, for example, will be an item type made of two fields: one containing the actual quote, the other containing the author:

1483891306 screenshot 2017 01 08 17 00 30 png?w=652&fit=max

Quite easy, right? Now repeat the process for all the other blocks.

Step 2: add the Rich text to an Item type

Now that the basic blocks are ready, we can finally select the Article item type, and add a Rich text field (you'll find it under the Text group):

1484864102 screenshot 2017 01 19 23 14 04 png?w=652&fit=max

Let's name it "Content", and in the "Validations" tab, make sure to select the item types you previously created:

1484864111 screenshot 2017 01 19 23 14 41 png?w=652&fit=max

Now save the field and.. you made it! You just created an awesome rich-text editor for your authors. Just for the sake of being meta, here's me writing this very article in a rich text field!

1483892964 screenshot 2017 01 08 17 29 18 png?w=652&fit=max