CKEditor 5：将表功能添加到classic-build失败

Question

我正在使用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

Answer 1

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