Extending the Rich Text Content Editor

In Agility CMS, the Rich Text Editor can be customized in many ways. Take your Rich Text Content Editor experience to the next level by extending and customizing its functionality.

Here's What We'll Look at:

1. Script Hooks
2. Custom Classes
3. Templates

Script Hooks

In Agility, the Rich Text Editor can be customized with a script hook that fires on initialization of the Rich Text Area module or any HTML field on Module and Content Definitions. The script, ContentManager.Global.RichTextAreaOnInit, that will fire can be defined in the inline code section of Agility CMS. 

Once the inline code is defined, it can be setup to be loaded by Agility CMS under the "Advanced" tab in Content Editor settings. 

This functionality could be used for customizing the actions that a user can perform based on their role/permissions that are set up in the instance. The following snippet removes a button from default rich text area buttons.

(function () {
    //get current website user
    ContentManager.DataAccess.WebsiteUser(
        ContentManager.Global.NavContext.websiteName, 
        function (resp) {
            //check the Permission attribute of resp
            if (!resp.Permission.Deny) {
                //define the RichTextAreaOnInit script hook
                ContentManager.Global.RichTextAreaOnInit = function (editor) {
                    //parameter "editor" that is passed in is the 
                    //constructed rich text area js object.
                    //remove edithtmlcode button
                    editor.buttons.edithtmlcode = null;
                }
            }
        }
    );
})(); 

Custom Classes

Agility gives you the ability to create custom classes that your editors can then use within the Rich Text Content Editor.

To start, head into your Agility CMS Dashboard and go to Settings > Content Editor. Under the General tab, you will see a CSS Editor, let's add some CSS code here:

Head over to any Rich Text Editor, and you should be able to format some content with your new CSS classes!

Templates