Change CKEditor Default Configuration

  • 1
  • Idea
  • Updated 2 weeks 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. 

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


http://ckeditor.com/latest/samples/plugins/enterkey/enterkey.html



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,320 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,320 Points 2k badge 2x thumb
When using CKEditor changes it completely breaks the SKUID --> Rich Text Editor integration. The data is gone and the editor is not bound to Skuid Models anymore once you run any CKEditor change in Javascript. I need the Enter Mode to be changed.

I also tried to apply CSS to the editor and it doesn't work either.

I need help.... :(
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,228 Points 20k badge 2x thumb
Jarrod,  we don't load the CKEditor when the page loads,  so there is not a good even to connect to for running your property modification code.   It loads when the text box is opened, and there is not really a good event for that. 

Maybe a custom field renderer? 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,320 Points 2k badge 2x thumb
Is there any way I could edit the Default CKE Config file that is used when any CKEditor is loaded in? I assume this is buried in a Skuid object/file somewhere. I really only need the one setting adjusted "enterMode: CKEDITOR.ENTER_BR".
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,228 Points 20k badge 2x thumb
We've spent a few hours looking into this possibility.  We don't have any good ways of exposing the configuration of the CK Editor before its rendered.  And once its rendered its really tough to change.   At this point, we'lll take this as an enhancement request to allow this sort of config hooks into the CK Editor.  

Sorry. 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,320 Points 2k badge 2x thumb
Appreciate you guys taking a stab at it. I guess my other option would be a Replace in a trigger on </p> with a <br/>
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,272 Points 50k badge 2x thumb
Jarrod, in the next Superbank patch release we are going to add a JavaScript method to customize CKEditor configuration, using a Custom Field Renderer. Right now it's virtually impossible, but with the option we're adding, it will be very easy. Will keep you posted.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,320 Points 2k badge 2x thumb
Man you guys are just awesome this will be very helpful to lock down the features/config of the CKEditor to keep data just how we want it. Thanks for all of your teams hard work! 
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,272 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); 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,928 Points 5k badge 2x thumb
I'm having trouble getting any options but enterMode to function. What I'm aiming for is a tiny version of the editor like this:


Here's my code, it's updated to reflect the new skuid.ui.getFieldRenderer standard

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


It works great for setting <br> instead of <p>, but the uiColor or height or anything else I've tried from this list doesn't seem to have an affect. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,928 Points 5k badge 2x thumb
Here's the final code for anyone following along at home, this gives a nice small version of the editor:
var field = arguments[0],
value = skuid.utils.decodeHTML(arguments[1]); field.options.ckEditorConfig = function (){ return { toolbar : [ [ 'Undo', 'Redo' ] ,[ 'Bold', 'Italic',] ,['TextColor','BGColor','FontSize'] ,['NumberedList','BulletedList','Indent','Outdent'] // ,['Cut','Copy','Paste'] ,['Link','Unlink'] ,['RemoveFormat','HorizontalRule'] ] ,enterMode: CKEDITOR.ENTER_BR // ,toolbarLocation: 'bottom' }; }; skuid.ui.getFieldRenderer(field.metadata.displaytype)[field.mode](field,value);
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,928 Points 5k badge 2x thumb
Any chance we could get the Source option added to the skuid__ckEditor's config.js in the future? We can adjust what the editor looks like in Skuid by removing defualt items, but it looks like we can't any new options that aren't provided in the config.js file. Source would be nice to have, we have users pasting in tables with certain widths that are breaking visualforce PDF pages, need to be able to edit those widths in the html markup. 

Alternatively, how can we replace skuid's ckEditor with our own version of the config.js file??
Photo of Ankita

Ankita

  • 130 Points 100 badge 2x thumb
hi all,

I want to add a text editor in field editor.Is it possible.? If yes ,kindly explain the steps. Any quick reply will be highly appreciated.

Thank you.