Steps:

  1. Visit https://ckeditor.com/cke4/addons/skins/all. Choose your desired plugin and skin. I used pbckcode plugin and moonodark skin.
  2. I'm following method 1 in creating custom js. https://dev.to/morinoko/adding-custom-javascript-in-rails-6-1ke6

Inside my home.js file:

 /* Provide the full url/path of your domain */
var ckeditor_assets = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':' + window.location.port: '');

/*  The CKEDITOR.plugins.addExternal() method accepts three parameters:
    The name of the plugin.
    The location of the plugin.
    File name (usually “plugin.js”). 
*/
CKEDITOR.plugins.addExternal( 'pbckcode', ckeditor_assets+'/ckeditor/plugins/pbckcode/', 'plugin.js' );

/* Replace text_area with your desired element id */
CKEDITOR.replace( 'ckeditor', {

    /*  Skin name
        Location
    */
    skin: 'moonodark,'+ckeditor_assets+'/ckeditor/skins/moonodark/',
    
    /* Declare pbckcode as an extra plugin */
    extraPlugins: 'pbckcode',

    /* Customize the default toolbar if you like.
        You may refer to 
        https://ckeditor.com/docs/ckeditor4/latest/features/toolbar.html#toolbar-configurator.
        Don't forget to add the pbckcode plugin.
    */
    toolbar: [
        [ 'Source' ], 
        [ 'clipboard', 'undo', '-', 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo', 'Preview' ],
        [ 'TextColor', 'Bold', 'Italic' ],
        [ 'Format', 'Font', 'FontSize' ],
        [ 'Image', 'Iframe' ],
        [ 'pbckcode' ]
]
} );
  1. In your html.erb file, call your element id.

Ex.

<%= f.text_area :description, :id => 'ckeditor' %>

https://simple-rails-crud.herokuapp.com/posts/new

Github repo: https://github.com/jsafe00/dockerize-ruby-on-rails-crud/tree/add-plugin-skin-ckeditor