Creating a rich text editor field for your templates

Posted 23rd Sep 2017

#ckeditor #fields

A rich text editor is an essential part of any CMS which allows users to edit and style content with greater flexibility than a plain text field.

Admin > Setup > Fields

Add a new field called 'myBodyContent'.

Naming the field and choosing type
Naming the field and choosing type Zoom

Admin > Setup > Fields > Details (tab)

Text Formatters: Leave this blank as this field will contain HTML or markup.

Inputfield type: CKeditor.

Content type: Markup/HTML.

Choosing Inputfield type
Choosing Inputfield type Zoom

HTML Options

When Markup//HTML has been selected, a number of extra options become available.

Link abstraction: If you link to other pages on your site within this field, then later change the URL of the page that your link points to, you will get broken links. Checking this field makes sure that the links are properly synced.

Update image alt attributes: Images should always have a text alternaitive for accessibiility. Checking this means you can use the description field on images and an alt attribute will be automatically added.

Fix broken Images: Fixes messy 'file not found' on broken links to images.

Image access control: Control for images dependng on current user permissions.

Apply HTML options now: Applies the above selected options as a mass update across your site. This would be useful if you checked the above options after you had already created a lot of content.

Extra options appear when Markup//HTML has been selected
Extra options appear when Markup//HTML has been selected Zoom

Admin > Setup > Fields > Input (tab)

The input tab has so many options, that would probably need a post of its own so this can be left as default. Have a look through the options though, it's well documented.

Admin > Setup > Templates

Choose a template to edit, I chose 'basic-page' and use the 'Add field' dropdown to add 'myBodyContent' to this template. Then save it.

Adding the field to a template
Adding the field to a template Zoom

Create a new page called 'About me' using the 'basic-page' template and start using your new field!

In order to be able to add images directly into the rich text editor, you will need to add an images field to the template.

Feedback & support

I hope you enjoyed this tutorial. You can support pwtuts by following on @pwtuts. You can also donate at paypal.me/swcarrey to help support the site which would be awesome!

Related tutorials / See all

Suggest a tutorial

Please note: I do not store any of this information, it's simply used to send me an email. Your email address is required so I can get clarification on your request if needed.