在CKEditor 5的自定义构建中导出ClassicEditor
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在CKEditor 5的自定义构建中导出ClassicEditor相关的知识,希望对你有一定的参考价值。
我正在尝试使用“Scenario 2”构建CKEditor 5,如下所述:
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html
它几乎可以工作。在我的app.js
中,它与webpack的编辑器一起编译,我可以引用ClassicEditor.create
,从而创建一个新的编辑器:)
但ClassicEditor
不会导出,因此任何未由Webpack编译的外部javascript都无法引用ClassicEditor
(我只是得到“ReferenceError:ClassicEditor未定义”)。
那么如何让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'
};
答案
事实证明我只需要添加
window.ClassicEditor=ClassicEditor;
在我的app.js文件的底部
以上是关于在CKEditor 5的自定义构建中导出ClassicEditor的主要内容,如果未能解决你的问题,请参考以下文章
CKEditor 5如何从任何小部件/模型/视图中获取单击,更新和删除的事件