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

您不得将插件添加到现有版本中。您只能将插件添加到源代码编辑器（注意@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指南，就不会发生此问题。

CKEditor 5：将表功能添加到经典构建时失败

1 个答案: