ckeditor5 & CakePHP 2.3: How do I make the tables

Question

I have a CakePHP 2.3 app that for years has had whatever version CK Editor.

I'm working in developing mode, hoping to upgrade it to CKEditor 5.

I easily and quickly got rid of all old code and files to make ckeditor5 work just fine in its most basic version.

This was a go!

However, I do need tables. I'm now working on getting the table feature set up and just cannot get it working.

Here's their doc on this: https://docs.ckeditor.com/ckeditor5/latest/features/table.html

npm install --save @ckeditor/ckeditor5-table has run successfully. The files are in my repo.

However, the import Table from '@ckeditor/ckeditor5-table/src/table'; and import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; statements make things break.

I have tried moving the @ckeditor folder out of the main project and into the app's app/webroot/js folder.

I have tried calling the scripts in different ways.

I am currently trying to figure out if require.js is the answer for loading these modules, but can't seem to understand how to make it all come together.

Basically, the big question is:

For CakePHP 2.3 specifically,

where should the @ckeditor folder be

and how do those files/modules get imported into Views

without generating

Uncaught SyntaxError: Unexpected identifier or Uncaught Error: Module name 'Table' has not been loaded yet for context:

errors?

And a little question:

Has anyone put out content on how to get the CKEditor 5 working with its table feature in a CakePHP app, yet? I can't seem to find it.

Answer 1

ndm's answer led me to look into webpack closely. I knew nothing about. It was much more suited for this job than require.js.

I must say that I still don't understand all of the inner workings of each thing below, but I got the ckeditor 5 working with tables, as needed.

I had to:

1. install Node.js
2. install npm
3. do a local ckeditor 5 build (I had hoped to stick with CDN) - link here
4. do a plugin install with the table plugin - link for plugin install here and link for table plugin directions here
5. Set toolbars and other settings in the src/ckeditor.js file itself before running npm run build. I could not get it working from the HTML, because I could not get js to recognize the names and classes. I kept getting Unexpected identifier errors until I just gave up and called it directly from src/ckeditor.js. This is fine for my case, because all of my app's CK Editor boxes can be the same. If you need variation, I'm not sure how to make that work.

Finally, I should point out that for all of my command line actions, I worked directly from CakePHP's app/webroot/js directory, so things were installed in such a way that in the end, my script call is: <script src="/js/ckeditor5-build-classic/build/ckeditor.js"></script>, so my code for creating the box is:

<textarea id="my_dear_ckeditor5_textarea"></textarea>

<!-- ckeditor.js built by following steps 1 thru 5 above -->
<script src="/js/ckeditor5-build-classic/build/ckeditor.js"></script>

<script type="text/javascript">
$(function(){

    ClassicEditor
    .create( document.querySelector( '#my_dear_ckeditor5_textarea' ) )
    .catch( error => {} );

});
</script>

If someone needs this reference, here's EXACTLY what my src/ckeditor.js looks like:

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph,
    Alignment,
    Table,
    TableToolbar
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'alignment',
            '|',
            'bold',
            'italic',
            '|',
            'link',
            '|',
            'bulletedList',
            'numberedList',
            '|',
            'blockQuote',
            '|',
            'insertTable',
            '|',
            'undo',
            'redo'
        ]
    },
    heading: {
        options: [
        { model: 'paragraph', title: 'parágrafo normal', class: 'ck-heading_paragraph' },
        { model: 'heading1', view: 'h1', title: 'Título 1', class: 'ck-heading_heading1' },
        { model: 'heading2', view: 'h2', title: 'Título 2', class: 'ck-heading_heading2' },
        { model: 'heading3', view: 'h3', title: 'Título 3', class: 'ck-heading_heading3' },
        { model: 'heading4', view: 'h4', title: 'Título 4', class: 'ck-heading_heading4' },
        { model: 'heading5', view: 'h5', title: 'Título 5', class: 'ck-heading_heading5' },
        { model: 'heading6', view: 'h6', title: 'Título 6', class: 'ck-heading_heading6' },
        { model: 'heading7', view: 'h7', title: 'Título 7', class: 'ck-heading_heading7' }
            ]
    },
  table: {
      toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  },
    language: 'pt-br'
};