How can we use basic CKEditor?

Jack SanfordJack Sanford San Antonio, TX 💎💎
edited April 12, 2018 in Questions
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

Comments

  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 12, 2018
    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. 

  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 12, 2018
    The above code renders this:
    image


    as opposed to the default of this:
    image
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 12, 2018
    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
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 12, 2018
    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. 
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited April 12, 2018
    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?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!