ckeditor5 & CakePHP 2.3：如何使表格工作？

Question

我有一个 CakePHP 2.3 应用程序，多年来一直使用任何版本的 CK Editor。

我正在开发模式下工作，希望将其升级到 CKEditor 5。

我轻松快速地摆脱了所有旧代码和文件，以使 ckeditor5 在其最基本的版本中正常工作。

成功了！

但是，我确实需要桌子。我现在正在着手设置表格功能，但无法正常工作。

这是他们的文档： https://docs.ckeditor.com/ckeditor5/latest/features/table.html

npm install --save @ckeditor/ckeditor5-table 已成功运行。这些文件在我的仓库中。

但是，import Table from '@ckeditor/ckeditor5-table/src/table'; 和 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; 语句使事情变得混乱。

我已尝试将 @ckeditor 文件夹移出主项目并移至应用程序的 app/webroot/js 文件夹中。

我尝试过以不同的方式调用脚本。

我目前正在尝试确定 require.js 是否是加载这些模块的答案，但似乎无法理解如何将它们组合在一起。

基本上，最大的问题是：

特别是对于 CakePHP 2.3，

@ckeditor 文件夹应该在哪里

以及这些文件/模块是如何导入到视图中的

不生成

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

错误？

还有一个小问题：

有没有人发布过如何让 CKEditor 5 在 CakePHP 应用程序中使用其表格功能 工作的内容？好像没找到。

Answer 1

ndm 的回答让我仔细研究了webpack。我对此一无所知。它比require.js 更适合这份工作。

我必须说我仍然不了解下面每件事的所有内部工作原理，但我让 ckeditor 5 根据需要使用表格。

我不得不：

1. 安装 Node.js
2. 安装 npm
3. 进行本地 ckeditor 5 构建（我曾希望坚持使用 CDN）-link here
4. 使用表格插件进行插件安装 - link for plugin install here 和 link for table plugin directions here
5. 在运行npm run build 之前，在src/ckeditor.js 文件本身中设置工具栏和其他设置。我无法通过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'
};