ckeditor5 和 CakePHP 2.3：如何使表工作？

Question

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

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

我轻松快速地删除了所有旧代码和文件，使 ckeditor5 在其最基本的版本中工作得很好。

成功了！

不过，我确实需要 tables。我现在正在努力设置 table 功能，但无法正常工作。

这是他们的文档： 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 文件夹应该放在哪里

以及如何将这些 files/modules 导入到视图中

不生成

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

错误？

还有一个小问题：

有没有人发布有关如何让 CKEditor 5 工作 及其 table 功能 的内容 CakePHP 应用程序了吗？我好像找不到。

Answer 1

ndm 的回答让我仔细研究了 webpack。我对此一无所知。它比 require.js.

更适合这份工作

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

我不得不：

安装Node.js
安装 npm
进行本地 ckeditor 5 构建（我曾希望坚持使用 CDN）- link here
使用 table 插件安装插件 - link for plugin install here 和 link table 插件说明这里
在运行 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'
};

ckeditor5 和 CakePHP 2.3：如何使表工作？

ckeditor5 & CakePHP 2.3: How do I make the tables work?

javascript

cakephp

ckeditor

cakephp-2.3

ckeditor5