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
答案
- 您不得将插件添加到现有构建中。您只能将插件添加到源编辑器(请注意
@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:将表功能添加到classic-build失败的主要内容,如果未能解决你的问题,请参考以下文章
使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5