Forum

Thread tagged as: Question, Problem

Installing Custom ckeditor

Hello,

I'm attempting to install a custom version of ckeditor-- a Bootstrap friendly version.

I've compared the directory structure and files and they look the same. I simply grabbed the /editors/perch folder and _config.json file and made sure the editor the file names were the same-- /editors/ckeditor and /editors/ckeditor/ckeditor-4.

Is there a reason why this wouldn't work?

There is nothing in the error console when editing a region that should initialize the editor.

Thank you, Trevor Brandt

Perch: 3.1.1, PHP: 7.2.8, MySQL: 10.1.31-MariaDB, with PDO
Server OS: Linux, litespeed
Installed apps: content (3.1.1), assets (3.1.1), categories (3.1.1)
App runtimes: <?php $apps_list = [ ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/trvovwbh/public_html/perch
PERCH_CORE: /home/trvovwbh/public_html/perch/core
PERCH_RESFILEPATH: /home/trvovwbh/public_html/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 512M, Max POST 64M, Memory: 192M, Total max file upload: 64M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
HTTP_HOST: trvor.com
DOCUMENT_ROOT: /home/trvovwbh/public_html
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Trevor Brandt

Trevor Brandt 0 points

  • 3 years ago
Trevor Brandt

Trevor Brandt 0 points

3 years ago

Also, I should add that I also have uploaded Perch's instance of ckeditor, and it works. I'm unable to enable the plugin (https://js.plus/docs/install-and-configure-ckeditor-bootstrap-full-bundle), however, when I edit config.js in ckeditor-4. I'm unable to change the skin etc.

Here's the code I put into ckeditor-4/config.js:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {

    config.extraPlugins = 'jsplusInclude,jsplusBootstrapTools,jsplusBootstrapWidgets,jsplusBootstrapTableTools,jsplusBootstrapEditor,jsplusFileUploaderLite';
    config.language = 'en';
    config.toolbar = [
        [
            'jsplusBootstrapEditor',
            'jsplusBootstrapEditorSelected'
        ],
        [
            'jsplusFastUploadImage',
            'jsplusFastUploadPreview',
            'jsplusFastUploadFile'
        ],
        [
            'jsplus_bootstrap_button',
            'jsplus_bootstrap_icons',
            'jsplus_bootstrap_label',
            'jsplus_bootstrap_badge',
            'jsplus_bootstrap_breadcrumbs',
            'jsplus_bootstrap_alert',
            'jsplus_bootstrap_gallery',
        ],
        [
            'jsplusShowBlocks',
            '-',
            'jsplusBootstrapToolsContainerEdit',
            'jsplusBootstrapToolsContainerAdd',
            'jsplusBootstrapToolsContainerAddBefore',
            'jsplusBootstrapToolsContainerAddAfter',
            'jsplusBootstrapToolsContainerDelete',
            'jsplusBootstrapToolsContainerMoveUp',
            'jsplusBootstrapToolsContainerMoveDown',
            '-',
            'jsplusBootstrapToolsRowEdit',
            'jsplusBootstrapToolsRowAdd',
            'jsplusBootstrapToolsRowAddBefore',
            'jsplusBootstrapToolsRowAddAfter',
            'jsplusBootstrapToolsRowDelete',
            'jsplusBootstrapToolsRowMoveUp',
            'jsplusBootstrapToolsRowMoveDown',
            '-',
            'jsplusBootstrapToolsColEdit',
            'jsplusBootstrapToolsColAdd',
            'jsplusBootstrapToolsColAddBefore',
            'jsplusBootstrapToolsColAddAfter',
            'jsplusBootstrapToolsColDelete',
            'jsplusBootstrapToolsColMoveLeft',
            'jsplusBootstrapToolsColMoveRight',
        ],
        '/',
        [
            'jsplus_bootstrap_table_new',
            'jsplus_bootstrap_table_conf',
            '-',
            'jsplusTableRowAddBefore',
            'jsplusTableRowAddAfter',
            'jsplus_bootstrap_table_row_conf',
            'jsplusTableRowMoveUp',
            'jsplusTableRowMoveDown',
            'jsplusTableRowDelete',
            '-',
            'jsplusTableColAddBefore',
            'jsplusTableColAddAfter',
            'jsplus_bootstrap_table_col_conf',
            'jsplusTableColMoveLeft',
            'jsplusTableColMoveRight',
            'jsplusTableColDelete',
            '-',
            'jsplus_bootstrap_table_cell_conf',
            'jsplusTableCellMergeRight',
            'jsplusTableCellMergeDown',
            'jsplusTableCellSplit',
        ],
        [
            'Source'
        ]
    ];


    config.allowedContent = true;
    config.height = 600;
    config.skin = 'be';

    config.jsplusInclude = {
        framework: "b3"
    }

    config.jsplusBootstrapEditor = {
        HTMLEditorConfig: {
            skin: "be",
            jsplusInclude: {
                framework: "b3"
            },
            extraPlugins: 'jsplusInclude,jsplusBootstrapTools,jsplusBootstrapWidgets,jsplusBootstrapTableTools,jsplusFileUploaderLite',
            toolbar: [
               [
                   'jsplusFastUploadImage',
                   'jsplusFastUploadPreview',
                   'jsplusFastUploadFile'
               ],
                [
                    'jsplus_bootstrap_button',
                    'jsplus_bootstrap_icons',
                    'jsplus_bootstrap_label',
                    'jsplus_bootstrap_badge',
                    'jsplus_bootstrap_breadcrumbs',
                    'jsplus_bootstrap_alert',
                    'jsplus_bootstrap_gallery',
                ],
                [
                    'jsplusShowBlocks',
                    '-',
                    'jsplusBootstrapToolsContainerEdit',
                    'jsplusBootstrapToolsContainerAdd',
                    'jsplusBootstrapToolsContainerAddBefore',
                    'jsplusBootstrapToolsContainerAddAfter',
                    'jsplusBootstrapToolsContainerDelete',
                    'jsplusBootstrapToolsContainerMoveUp',
                    'jsplusBootstrapToolsContainerMoveDown',
                    '-',
                    'jsplusBootstrapToolsRowEdit',
                    'jsplusBootstrapToolsRowAdd',
                    'jsplusBootstrapToolsRowAddBefore',
                    'jsplusBootstrapToolsRowAddAfter',
                    'jsplusBootstrapToolsRowDelete',
                    'jsplusBootstrapToolsRowMoveUp',
                    'jsplusBootstrapToolsRowMoveDown',
                    '-',
                    'jsplusBootstrapToolsColEdit',
                    'jsplusBootstrapToolsColAdd',
                    'jsplusBootstrapToolsColAddBefore',
                    'jsplusBootstrapToolsColAddAfter',
                    'jsplusBootstrapToolsColDelete',
                    'jsplusBootstrapToolsColMoveLeft',
                    'jsplusBootstrapToolsColMoveRight',
                ],
                ['jsplusBootstrapEditorColConf', 'jsplusBootstrapEditorColChangeType'],
                ['jsplusBootstrapEditorColMoveLeft', 'jsplusBootstrapEditorColMoveRight'],
                ['jsplusBootstrapEditorColAdd'],
                ['jsplusBootstrapEditorColDelete'],
                '/',
                [
                    'jsplus_bootstrap_table_new',
                    'jsplus_bootstrap_table_conf',
                    '-',
                    'jsplusTableRowAddBefore',
                    'jsplusTableRowAddAfter',
                    'jsplus_bootstrap_table_row_conf',
                    'jsplusTableRowMoveUp',
                    'jsplusTableRowMoveDown',
                    'jsplusTableRowDelete',
                    '-',
                    'jsplusTableColAddBefore',
                    'jsplusTableColAddAfter',
                    'jsplus_bootstrap_table_col_conf',
                    'jsplusTableColMoveLeft',
                    'jsplusTableColMoveRight',
                    'jsplusTableColDelete',
                    '-',
                    'jsplus_bootstrap_table_cell_conf',
                    'jsplusTableCellMergeRight',
                    'jsplusTableCellMergeDown',
                    'jsplusTableCellSplit',
                ],
            ],
            allowedContent: true
        }
    };

};

But the editor stays exactly the same.

Also, I did enable custom configs in config.php. I am a bit confused about the file that I'm to place in addons/plugins/editors called config.js. I tried making my own version of the file with one of the plugins:

Perch.UserConfig.ckeditor = function(){

  var get = function(profile, config, field) {

    if (config.plugins.indexOf('jsplusInclude') === -1) config.plugins.push('jsplusInclude');

    return config;
  };

  var load = function(cb) {
    if (typeof jQuery.ckeditor.prototype.source == 'undefined') {
      jQuery.getScript(Perch.path+'/addons/plugins/editors/ckeditor/ckeditor-4/plugins/jsplusInclude', function(){
      }); 

    } else {
      cb();
    }
  };

  return  {
    'get': get,
    'load': load
  }

}();

But this didn't help.
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

Are you wanting to install a custom version of CKEditor, or apply a custom configuration to the one that's already there?
Trevor Brandt

Trevor Brandt 0 points

2 years ago

A custom config to the one that's already there. It's a plugin and a theme change.
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

Are you following the steps in "Custom configurations for default editors" on this page? https://docs.grabaperch.com/api/editors/
Trevor Brandt

Trevor Brandt 0 points

2 years ago

I enabled custom configs in the config file, yes. The other steps are a bit confusing to me, and they seem to be geared towards Redactor. Are they the same for ckeditor? Or is there documentation separate for that?
Trevor Brandt

Trevor Brandt 0 points

2 years ago

Still trying to get this resolved. Thanks.
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

It's the same for CKEditor. Which parts aren't working for you? What have you got and where is it failing?