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

Question

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

我正在开发模式下工作，希望将其升级到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 文件夹应该在哪里

以及如何将这些文件/模块导入到 View 中

不生成

未捕获的语法错误:意外的标识符或者未捕获错误:尚未为上下文加载模块名称“Table”:

错误？

还有一个小问题:

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

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