Ckeditor5 & Cakephp 2.3: How Do I Make The Tables Work?

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

Solution 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:

<textareaid="my_dear_ckeditor5_textarea"></textarea><!-- ckeditor.js built by following steps 1 thru 5 above --><scriptsrc="/js/ckeditor5-build-classic/build/ckeditor.js"></script><scripttype="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.importClassicEditorBasefrom'@ckeditor/ckeditor5-editor-classic/src/classiceditor';

importEssentialsfrom'@ckeditor/ckeditor5-essentials/src/essentials';
importUploadAdapterfrom'@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
importAutoformatfrom'@ckeditor/ckeditor5-autoformat/src/autoformat';
importBoldfrom'@ckeditor/ckeditor5-basic-styles/src/bold';
importItalicfrom'@ckeditor/ckeditor5-basic-styles/src/italic';
importBlockQuotefrom'@ckeditor/ckeditor5-block-quote/src/blockquote';
importHeadingfrom'@ckeditor/ckeditor5-heading/src/heading';
importLinkfrom'@ckeditor/ckeditor5-link/src/link';
importListfrom'@ckeditor/ckeditor5-list/src/list';
importParagraphfrom'@ckeditor/ckeditor5-paragraph/src/paragraph';
importAlignmentfrom'@ckeditor/ckeditor5-alignment/src/alignment';
importTablefrom'@ckeditor/ckeditor5-table/src/table';
importTableToolbarfrom'@ckeditor/ckeditor5-table/src/tabletoolbar';

exportdefaultclassClassicEditorextendsClassicEditorBase {}

// 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'
};