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 (
) to inserting a line break (
):
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);