Helpful CKEditor Configurations in Kentico

   —   

Kentico offers a great editing experience to users through a number of interfaces, utilities, and integrations. One of the key pieces of a great experience is the ability to enter and edit text quickly. Kentico relies on the CKEditor (an open source WYSIWYG editor) to allow users to insert and format their content. In this article, I’ll tell you about some helpful configuration options you can take advantage of to tailor the experience for your organization.

Having spent the last 6+ years working with Kentico, I’ve gotten pretty familiar with the CKEditor. Even before its recent name change, I was customizing this tool to implement custom styles, change the available options, and make sure no rogue editors could wreak havoc on the site design. Yes, manipulating the CKE (as the cool kids call it) was common practice for nearly every project I’ve been a part of — and I’m betting in a lot of yours, as well. Because of this ever-growing need for customization, Kentico has a lot of great configuration options in place to help you.

Web.Config Keys

Many of the aspects of the CKE can be modified using some handy web.config keys. These keys allow developers to change the available options in the editor, set the path of the source files, and even address computability issues with some browsers quickly.

CKEditor:DefaultToolbarSet
This key will allow you to set the default toolbar editors will see to either Full, Standard, or Basic. You can also define your own custom toolbar set and use it in this key.

<add key="CKEditor:DefaultToolbarSet" value="Basic" />

Default Toolbar

CMSWYSIWYGFixXHTML
This key will determine if the CKE should automatically fix XHTML incompatibilities. Setting this to false may be required if you need absolute control over the HTML generated by the CKE.

CKEditor:BasePath
This key sets the path Kentico will use to find the CKE source files. If you decide to move the source files for some reason, be sure to set the new path using this key.

CKEditor:PersonalizeToolbarOnLiveSite
This key allows the toolbar to be customized by users when viewed on the “live” site.

CMSDefaultSpellCheckerCulture 
This key sets the default culture to be used when spell checking CKE content.

You can read more about these web.config keys here.

Toolbar Sets

While Kentico ships with a number of pre-defined toolbar sets, another popular modification is to add or remove specific options from the interface. This may include removing the ability to insert a dreaded HTML table, disabling the Paste from Word function, or some other command that doesn’t quite align with your content strategy.

In order to accomplish this, you can define custom toolbar sets in the /CMS/CMSAdminControls/CKeditor/config.js file. This file allows you to customize the toolbar for your needs and ensure only the correct commands are available. Additionally, you can add in your own custom commands to perform another command not already included.

In my example, I have removed the "PasteText" and "PasteFromWord" options.

config.toolbar_Full = [ [sourceName, '-'], ['Cut', 'Copy', 'Paste', 'Scayt', '-'], ['Undo', 'Redo', 'Find', 'Replace', 'RemoveFormat', '-'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-'], ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', '-'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'], '/', ['InsertLink', 'Unlink', 'Anchor', '-'], ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'], ['InsertForms', 'InsertPolls', 'InsertRating', 'InsertYouTubeVideo', 'InsertWidget', '-'], ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor', '-'], ['InsertMacro', '-'], ['Maximize', 'ShowBlocks'] ];

You can find out more about customizing toolbar sets here.

Custom Fonts

Another change companies often need to make is to set the font to a specific setting, perhaps because of RTL support or other compatibility requirements. Back in the /CMS/CMSAdminControls/CKeditor/config.js file, you can define any fonts you want the user to be able to select.

In my exmaple, I have added a few fonts to the list. 

config.font_names = 'Arial;Calibri;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Tahoma;Times New Roman;Trebuchet MS;Verdana';

Custom Fonts

You can find out more about custom font definitions here.

Style Changes

If your content editors are particularly skilled (or you trust them A LOT), you can use the built-in Style feature of the CKE to allow them to apply specific styles to their content. If you go this route, you will most certainly need to update the default list. Luckily, you can easily update the /CMS/CMSAdminControls/CKeditor/styles.js file to define any specific CSS that you need.

{ name : 'Big & Green', element : 'element', styles : { 'color' : 'green' , 'font-size' : '20px', 'font-weight' : 'bold' } }

Custom Styles

You can find out more about updating the styles.js file here.

Spell Checker

Another great feature of the CKE is the ability to spell check content within the editor. Once you enable SCAYT (Spell Check as You Type), the CKE will automatically check your content and suggest alternatives for anything it doesn’t understand.  If your content is not in English, then you can easily select other language dictionaries in the editor to enable the culture of your choice. 

Spell Checker

You find more about the CKE spell checker here.

Inserting Widgets

Giving editors the ability to insert widgets into their content is a great way to extend Kentico’s functionality. It also controls how and when widgets can be used. By using this feature, developers can create a specific web part, expose it to editors via the CKE, and control what properties can be set to ensure the styling and formatting are correct.

Insert Widget 1

Insert Widget 2

You can find out more about inserting widgets here.

Wrapping Up

As you can see, there has been a lot of development done to help you customize and tailor the content editing experience for your users. With these configurations, you can allow your editors to enter the content they need while ensuring that the styling and formatting match your site design and layout.  And if you are feeling especially totalitarian, you can lock down nearly every aspect of the editor and reign supreme over the content. Good luck!

Share this article on   LinkedIn

Bryan Soltis

Hello. I am a Technical Evangelist here at Kentico and will be helping the technical community by providing guidance and best practices for all areas of the product. I might also do some karaoke. We'll see how the night goes...

Comments