[英]loading CKEditor5 components with React.lazy
在我的项目中,我想使用CKEditor5。 问题是,此版本与IE11不兼容,因此我的目标是延迟加载CKEditor5组件,并且当检测到IE11时,我不想简单地加载这些组件。
当这样import CKEditor from "@ckeditor/ckeditor5-react";
组件时, import CKEditor from "@ckeditor/ckeditor5-react";
它只是导入类,但是使用React.lazy
导入组件被React.LazyExoticComponent
包装。
我需要根据文档https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html创建GFMDataProcessor
实例
但是对于动态导入,我无法执行此操作,因为这行代码会引发错误,并且我不知道应该传递什么参数,因为GFMDataProcessor
是React.LazyExoticComponent
而不是GFMDataProcessor
类。
//Expected 1 arguments, but got 0
const markdownPlugin = (editor) => { editor.data.processor = new GFMDataProcessor() }
另一个问题是我对CKEditor的配置,它也必须被延迟加载,这与上面的问题相同, ClassicEditor
还是React.LazyExoticComponent
而不是类,我必须传递给editor
属性导入的组件,而不是包装的React.LazyExoticComponent
。 有什么方法可以从包装的一个或任何其他方法中提取动态导入的组件,如何解决呢?
const ckeditorProps = {
data: data,
editor: ClassicEditor,
onChange: (event, editor) => {
const data2 = editor.getData();
if (data2 !== data) {
this.onChange(data2, this.state.selectedCultureCode, true);
}
},
config: editorConfiguration
}
这是我的动态导入
const CKEditor = React.lazy(() => import("@ckeditor/ckeditor5-react"));
const ClassicEditor = React.lazy(() => import("@ckeditor/ckeditor5-build-classic"));
const GFMDataProcessor = React.lazy(() => import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor"));
在DOM结构中的用法
<React.Suspense fallback={<div>Loading...</div>}>
<CKEditor {...ckeditorProps} />
</React.Suspense>
我不知道为什么将要异步获取的所有内容包装到React.lazy
组件中。 您只需要在需要时正常获取它们即可。 也许以下内容将为您工作:
let ClassicEditor, GFMDataProcessor;
const LazyCKEditor = React.lazy(() => {
return Promise.all([
import("@ckeditor/ckeditor5-build-classic"),
import("@ckeditor/ckeditor5-react"),
import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor")
]).then(([ _ClassicEditor, _CKEditor, _GFMDataProcessor ]) => {
ClassicEditor = _ClassicEditor;
GFMDataProcessor = _GFMDataProcessor;
return _CKEditor;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.