CKEditor 5：将表格功能添加到经典构建中失败答案

【问题标题】：CKEditor 5: Adding the table feature into classic-build failsCKEditor 5：将表格功能添加到经典构建中失败
【发布时间】：2018-07-31 14:03:43
【问题描述】：

我正在使用CKEditor 5，经典编辑器，我想在工具栏中添加表格功能，我使用webpack来管理依赖项，这是我的代码：

   import ClassicEditor from "@ckeditor/ckeditor5-build-classic/build/ckeditor";   
   import Table from '@ckeditor/ckeditor5-table/src/table';
   import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';


   $('.ckEditorArea').each(function () {

   ClassicEditor
        .create(this, {
            plugins: [ Table, TableToolbar ],
            toolbar: ['insertTable' ],
            table: {
                toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
            }
        } )
        .then( editor => {
            console.log( 'Editor was initialized', editor );
        } )
        .catch( error => {
            console.error( error.stack );
        } );
  )};

我添加了这个包：

    npm install --save @ckeditor/ckeditor5-table

然后我重建我的项目：

npm run build

我在导航器控制台中出现此错误：

add-test.3649361ad73210f1e631.js:71541 TypeError: Cannot read property 'getAttribute' of null
at IconView._updateXMLContent (add-test.3649361ad73210f1e631.js:46548)
at IconView.render (add-test.3649361ad73210f1e631.js:46524)
at IconView.on (add-test.3649361ad73210f1e631.js:62581)
at IconView.fire (add-test.3649361ad73210f1e631.js:57769)
at IconView.(anonymous function) [as render] (http://localhost:9027/build/js/add-edit/add-test.3649361ad73210f1e631.js:62585:16)
at ViewCollection.on (add-test.3649361ad73210f1e631.js:21922)
at ViewCollection.fire (add-test.3649361ad73210f1e631.js:57769)
at ViewCollection.add (add-test.3649361ad73210f1e631.js:514)
at DropdownButtonView.render (add-test.3649361ad73210f1e631.js:45244)
at DropdownButtonView.render (add-test.3649361ad73210f1e631.js:61776)

当我执行命令时这个

npm run build

结果：

error

js/add-test.9ba3edd31c9f973445cd.js from UglifyJs
Unexpected token: name (i) [js/add-test.9ba3edd31c9f973445cd.js:380,14

【问题讨论】：

标签： jquery webpack ckeditor ckeditor5 webpack-encore

【解决方案1】：

您不得将插件添加到现有构建中。您只能将插件添加到源代码编辑器（注意 @ckeditor/ckeditor5-build-classic 与 @ckeditor/ckeditor5-editor-classic 的区别）。请参考Installing plugins 和最近提出的一个非常相似的问题：ckeditor5 & CakePHP 2.3: How do I make the tables work?
您的设置似乎使用了旧版本的 UglifyJS，它只能缩小 ES5。 CKEditor 5 内置于 ES6 中，需要兼容 ES6 的压缩器或通过 Babel 将其源代码转换为 ES5。如果您使用 webpack 4+ 及其使用 uglifyjs-webpack-plugin 的内置“生产模式”，那么一切都可以开箱即用，因为该插件使用 ES6 兼容版本的 UglifyJS。您可以在the CKEditor 5 Framework's Quick start 指南中找到有关它的更多信息。但总的来说，如果您遵循 Installing plugins 指南，则不会出现此问题。

【讨论】：