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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CKEditor 5:将表功能添加到classic-build失败相关的知识,希望对你有一定的参考价值。

我正在使用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
答案
  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指南,问题就不会发生。

以上是关于CKEditor 5:将表功能添加到classic-build失败的主要内容,如果未能解决你的问题,请参考以下文章

使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

Customize CKEditor Classic

如何使用 ReactJS 在 CKEditor 5 中配置上传适配器?

如何获得 CKEditor 5 的价值?

CKEditor 5 的多个文本区域

ckeditor5富文本编辑器在vue中的使用