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.
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:
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:
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):
Let’s name it “Content”, and in the “Validations” tab, make sure to select the item types you previously created:
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!
Originally published at www.datocms.com.
