How can we use basic CKEditor?

  • 1
  • Question
  • Updated 7 months ago
I'd like to be able to use the Basic CKEditor instead of the one Skuid loads for Rich Text Fields. Any idea how I could do that?

https://sdk.ckeditor.com/samples/basicpreset.html
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb

Posted 7 months ago

  • 1
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
Here's a snippet to let you customize what icons you can see in the Rich Text Editor:

var field = arguments[0],
   value = skuid.utils.decodeHTML(arguments[1]);
field.options.ckEditorConfig = {
    toolbar : [
    [ 'Bold', 'Italic',]
    ,['NumberedList','BulletedList','Indent','Outdent']
    ,[ 'Cut', 'Copy', 'Paste', 'Undo', 'Redo' ]
    ,['Link','Unlink']
    ,['Format','FontSize','TextColor','Smiley']
    ]
//    ,enterMode: CKEDITOR.ENTER_BR
    };
skuid.ui.getFieldRenderer(field.metadata.displaytype)[field.mode](field,value);
 

Here's a couple of links that can help you track down what different buttons are called:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_toolbarconcepts.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_toolbar.html#basic-toolbar-configurator

If anyone can find a comprehensive list that would be great. 

Also note that only items that are included in Skuid's version of CKEditor can be included, for example, you can't get Underline. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
This code works better, more consistently. without the function and return, I was having problems getting it consistently to work when in a static resource in a master page:

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); 
 });


Also note that setting the toolbarLocation to the bottom, doesn't work, but what it does do effectively is completely hide the editing toolbar. So if you ever have a situation where you want that to happen, you can use that line. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
The above code renders this:



as opposed to the default of this:
(Edited)
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
Also, found the list of items included in skuid's CKEditor, in the config.js file if you download the static resource for CKEditor

config.toolbar_FieldEditor =
[
{name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
{name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll']},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
},
'/',
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
},
{name: 'links', items: ['Link', 'Unlink', 'Anchor']},
{name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak']},
'/',
{name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize']},
{name: 'colors', items: ['TextColor', 'BGColor']}
];

Note that Underline, Subscript, and Superscript are all removed by command later on in the config.js, so you can't use those
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
One thing I could still use help with, is how do I make the snippet universal and have it apply to all Rich Text fields on the page without having to use a custom field renderer on each field instance?