Change CKEditor Default Configuration

  • 1
  • Idea
  • Updated 8 months ago
  • Implemented
When using Rich Text Area Fields and the CKEditor that Skuid has I would like to correct the "Enter Key" Mode that CKEditor uses. By default SKUID places <p> tags when you press enter. I need to change the Mode to use <br> tags. This is possible with the CKEditor as the link describes below. 

When I try to change just that one setting it messes up the whole editor and the data is gone. 

How can I adjust the default Enter Mode successfully on the Skuid CKEditor Rich Text Editor?

The Javascript code I tried is:

$ = skuid.$;
$(document).ready(function() {
    CKEDITOR.replace( 'cke_editor1', {
       enterMode: CKEDITOR.ENTER_BR

This is needed due to the enter key spacing mismatch from the fields to export in html for word, email etc..
My users enter data and run a Drawloop document merge and the data comes over like the Rich Text Editor displays to them EXCEPT for the Enter Keys they hit.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,330 Points 2k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,004 Points 50k badge 2x thumb
Official Response
As of Superbank Patch 8 (now available on Skuid Releases), the default configuration of the CKEditor used for Rich Text fields can now be customized on a per-field basis via a JavaScript "Custom Field Renderer" Snippet.

Rich Text fields now check for a "ckEditorConfig" property on the field's options object, and this property can be set via JavaScript. Properties will extend / overwrite Skuid's default CKEditor configuration, so it's okay to pass in just one or a few configuration options that you want to change, there's no need to provide all config options, just the ones you want to change.

Here is an example of a very simple Custom Field Renderer Snippet that will change the Color of the CKEditor:

var field = arguments[0],
   value = skuid.utils.decodeHTML(arguments[1]); field.options.ckEditorConfig = {    uiColor: '#CCEAEE'  }; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

ckEditorConfig can also be a function which should returns a config object. This function will be evaluated after CKEditor is loaded, allowing you to make use of CKEditor constants / static properties, such as CKEDITOR.ENTER_BR.

For example, the following Custom Field Renderer configuration will allow you to change the default behavior of hitting the enter / return key from inserting a paragraph tag (<p>) to inserting a line break (<br>):

var field = arguments[0],
   value = skuid.utils.decodeHTML(arguments[1]); field.options.ckEditorConfig = function(){
   return {
      enterMode: CKEDITOR.ENTER_BR
}; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);