ckeditor5& CakePHP 2.3：如何使表起作用？ [英] ckeditor5 & CakePHP 2.3: How do I make the tables work?

问题描述

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

I have a CakePHP 2.3 app that for years has had whatever version CK Editor.

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

I'm working in developing mode, hoping to upgrade it to CKEditor 5.

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

I easily and quickly got rid of all old code and files to make ckeditor5 work just fine in its most basic version.

这是一个去！

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

However, I do need tables. I'm now working on getting the table feature set up and just cannot get it working.

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

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

npm install --save @ckeditor/ckeditor5-table has run successfully. The files are in my repo.

但是，导入表来自'@ ckeditor / ckeditor5-table / src / table'; 和从'@ ckeditor / ckeditor5-table / src / tabletoolbar'导入TableToolbar； 语句使事情中断。

However, the import Table from '@ckeditor/ckeditor5-table/src/table'; and import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; statements make things break.

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

I have tried moving the @ckeditor folder out of the main project and into the app's app/webroot/js folder.

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

I have tried calling the scripts in different ways.

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

I am currently trying to figure out if require.js is the answer for loading these modules, but can't seem to understand how to make it all come together.

基本上，最大的问题是：

对于CakePHP 2.3，

For CakePHP 2.3 specifically,

@ckeditor 文件夹应该在哪里

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

and how do those files/modules get imported into Views

未生成

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

错误？

还有一个小问题：

有人在 CakePHP 应用程序中发布有关如何使 CKEditor 5 及其表功能工作的内容吗？我似乎找不到它。

Has anyone put out content on how to get the CKEditor 5 working with its table feature in a CakePHP app, yet? I can't seem to find it.

推荐答案

ndm 的答案使我仔细研究了 webpack 。我什么都不知道比 require.js 更适合这份工作。

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.

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

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.

我必须：

1. 安装Node.js


2. 安装npm


3. 执行本地ckeditor 5构建（我希望坚持使用CDN）-在此处链接


4. 使用表格插件安装插件-在此处安装插件的链接和表插件方向
   的链接


5. 在 src / ckeditor中设置工具栏和其他设置.js 文件本身，然后运行 npm run build 。我无法在 HTML 中运行它，因为我无法获取 js 来识别名称和类。在我放弃并直接从 src / ckeditor.js 调用它之前，我一直收到意外标识符错误。这对我来说很好，因为我所有应用的 CK编辑器框都可以相同。如果您需要更改，则不确定如何使它生效。

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.

最后，我应该指出所有这些命令行操作，我直接从 CakePHP 的 app / webroot / js 目录工作，因此将东西安装在最后，我的脚本调用是：
< script src = / js / ckeditor5-build-classic / build / ckeditor.js>< / script> ，因此我用于创建框的代码是：

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:

<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 看起来像：

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.
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：如何使表起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！