java中fackeditor_在CKEditor 5的自定义构建中导出ClassicEditor

我正在尝试使用“Scenario 2”构建CKEditor 5，如下所述：

它几乎可以工作 . 在我的 app.js 中，通过webpack与编辑器一起编译，我可以引用 ClassicEditor.create ，从而创建一个新的编辑器:)

但是 ClassicEditor 参考 ClassicEditor (我只是得到"ReferenceError: ClassicEditor is not defined") .

那么如何导出 ClassicEditor ？

这是我使用的文件：

app.js:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';

import UploadadapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';

import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';

import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';

import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';

import BlockquotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';

import EasyimagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';

import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';

import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';

import ImagecaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';

import ImagestylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';

import ImagetoolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';

import ImageuploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';

import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';

import ListPlugin from '@ckeditor/ckeditor5-list/src/list';

import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.build = {

plugins: [

EssentialsPlugin,

UploadadapterPlugin,

AutoformatPlugin,

BoldPlugin,

ItalicPlugin,

BlockquotePlugin,

EasyimagePlugin,

HeadingPlugin,

ImagePlugin,

ImagecaptionPlugin,

ImagestylePlugin,

ImagetoolbarPlugin,

ImageuploadPlugin,

LinkPlugin,

ListPlugin,

ParagraphPlugin

],

config: {

toolbar: {

items: [

'heading',

'|',

'bold',

'italic',

'link',

'bulletedList',

'numberedList',

'imageUpload',

'blockQuote',

'undo',

'redo'

]

},

image: {

toolbar: [

'imageStyle:full',

'imageStyle:side',

'|',

'imageTextAlternative'

]

},

language: 'en'

}

};

webpack.config.js：

// webpack.config.js

'use strict';

const path = require( 'path' );

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {

// https://webpack.js.org/configuration/entry-context/

entry: './app.js',

// https://webpack.js.org/configuration/output/

output: {

path: path.resolve( __dirname, 'dist' ),

filename: 'bundle.js'

},

module: {

rules: [

{

// Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader

// to CKEditor 5 icons only.

test: /\.svg$/,

use: [ 'raw-loader' ]

},

{

// Or /ckeditor5-[^/]+\/theme\/[^/]+\.css$/ if you want to limit this loader

// to CKEditor 5 theme only.

test: /\.css$/,

use: [

{

loader: 'style-loader',

options: {

singleton: true

}

},

{

loader: 'postcss-loader',

options: styles.getPostCssConfig( {

themeImporter: {

themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )

},

minify: true

} )

},

]

}

]

},

// Useful for debugging.

devtool: 'source-map'

};