ckeditor5 и CakePHP 2.3: Как заставить работать таблицы?

Ответ ndm заставил меня внимательно изучить webpack. Я ничего не знал о. Он гораздо больше подходил для этой работы, чем require.js.

Должен сказать, что я до сих пор не понимаю всей внутренней работы каждой вещи ниже, но я заставил ckeditor 5 работать с таблицами по мере необходимости.

Мне пришлось:

1. установить Node.js
2. установить нпм
3. сделать локальную сборку ckeditor 5 (я надеялся придерживаться CDN) - ссылка здесь
4. выполнить установку плагина с плагином таблицы - ссылка для плагина установить здесь и ссылку на инструкции по использованию подключаемого модуля таблицы здесь
5. Задайте панели инструментов и другие параметры в самом файле src/ckeditor.js перед запуском npm run build. Я не мог заставить его работать с HTML, потому что я не мог заставить js распознавать имена и классы. Я продолжал получать ошибки Unexpected identifier, пока не сдался и не позвонил прямо из src/ckeditor.js. В моем случае это нормально, потому что все поля CK Editor моего приложения могут быть одинаковыми. Если вам нужны вариации, я не уверен, как это сделать.

Наконец, я должен отметить, что для всех моих действий командной строки я работал непосредственно из каталога CakePHP app/webroot/js, поэтому все было установлено таким образом, что в конце мой вызов сценария: <script src="/js/ckeditor5-build-classic/build/ckeditor.js"></script>, поэтому мой код для создания ящика является:

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

Если кому-то нужна эта ссылка, вот ТОЧНО, как выглядит мой src/ckeditor.js:

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