import CKEditor from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
获取ckeditor 5重复模块错误。任何人都可以帮助我。提前感谢。
kmbjn2e31#
这是因为您正在导入插件的构建!为了添加插件,您必须进行个人构建。请阅读此页面了解更多信息:ckeditor offical documentation。他们甚至有一个官方的在线构建器,为你做所有的工作!:ckeditor online builder一旦你创建了它,你必须导入编辑器,就像你之前在第2行所做的那样,但是你必须从“你的个人构建的构建文件夹的地址”写入,而不是从“@ckeditor/ckeditor 5-build-classic”写入。希望对你有帮助。
k5hmc34c2#
我有这个问题,当我试图添加CKEditor和插件分开。最简单的方法是去CKEditor Online Builder,并选择什么插件和工具栏项目,你需要然后经过五个步骤的代码,你需要的工作生成。然后您可以使用build文件夹中名为ckeditor.js的文件,这几乎就是您所需要的全部内容。1-添加CK编辑器模块
@NgModule({ imports: [CKEditorModule], ... }
2-将CKEditor标记添加到模板中
<ckeditor [editor]="Editor" [(ngModel)]="notification.body" (ready)="onReady($event)" [config]="config" ></ckeditor>
3-在组件中导入自定义CKEditor js文件(您应该从下载的自定义CKEditor中的build文件夹复制该文件
import * as customEditor from './ckeditor';
4-在组件中创建属性
public Editor = customEditor;
5-添加配置
ngOnInit() { this.config = { toolbar: { items: [ 'heading', '|', 'fontSize', 'fontFamily', '|', 'bold', 'italic', 'underline', 'strikethrough', 'highlight', '|', 'alignment', '|', 'numberedList', 'bulletedList', '|', 'indent', 'outdent', '|', 'todoList', 'link', 'blockQuote', 'imageUpload', 'insertTable', '|', 'undo', 'redo' ] }, language: 'en', image: { toolbar: [ 'imageTextAlternative', 'imageStyle:full', 'imageStyle:side' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, licenseKey: '', wordCount: { onUpdate: stats => { this.charactersLength = stats.characters } } } }
就是这样:)
0wi1tuuw3#
注意:我们不再使用@ckeditor/ckeditor5-build-classic!
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
w9apscun4#
我也遇到过类似的问题,我安装了一个版本的所有模块后就解决了
apeeds0o5#
当我尝试在不同的页面上使用编辑器时,我遇到过这个问题。尝试了上面写的所有东西,没有任何帮助。为了解决这个问题,我使用了一个React惰性加载来导入编辑器。
rjzwgtxy6#
For vue2: Use the code below from online builder and it works fine after this isse. Hope this helps someone. <ckeditor :editor="editor" v-model="editorForm.editor_content" :config="editorConfig" :height="120" :rows="6" @input="onEditorInput" @ready="onReady"> <p>The initial editor data.</p> </ckeditor> Import custom build file ckeditor.js from node_modules: import CkEditorBuild from 'ckeditor5-custom-build/build/ckeditor'; Import ckeditor: import CKEditor from '@ckeditor/ckeditor5-vue2'; variable: editorForm: { editor_content: "", }, editor: CkEditorBuild, editorConfig: { toolbar: { items: [ 'heading', '|', 'htmlEmbed', // 'pageBreak', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'alignment', '|', 'numberedList', 'bulletedList', '|', 'indent', 'outdent', '|', 'link', 'blockQuote', 'imageUpload', 'insertTable', 'mediaEmbed', '|', 'undo', 'redo', ] }, language: 'cs', image: { toolbar: [ 'imageTextAlternative', 'imageStyle:center', ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, },
6条答案
按热度按时间kmbjn2e31#
这是因为您正在导入插件的构建!为了添加插件,您必须进行个人构建。请阅读此页面了解更多信息:ckeditor offical documentation。他们甚至有一个官方的在线构建器,为你做所有的工作!:ckeditor online builder一旦你创建了它,你必须导入编辑器,就像你之前在第2行所做的那样,但是你必须从“你的个人构建的构建文件夹的地址”写入,而不是从“@ckeditor/ckeditor 5-build-classic”写入。
希望对你有帮助。
k5hmc34c2#
我有这个问题,当我试图添加CKEditor和插件分开。最简单的方法是去CKEditor Online Builder,并选择什么插件和工具栏项目,你需要然后经过五个步骤的代码,你需要的工作生成。
然后您可以使用build文件夹中名为ckeditor.js的文件,这几乎就是您所需要的全部内容。
1-添加CK编辑器模块
2-将CKEditor标记添加到模板中
3-在组件中导入自定义CKEditor js文件(您应该从下载的自定义CKEditor中的build文件夹复制该文件
4-在组件中创建属性
5-添加配置
就是这样:)
0wi1tuuw3#
注意:我们不再使用@ckeditor/ckeditor5-build-classic!
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
w9apscun4#
我也遇到过类似的问题,我安装了一个版本的所有模块后就解决了
apeeds0o5#
当我尝试在不同的页面上使用编辑器时,我遇到过这个问题。尝试了上面写的所有东西,没有任何帮助。为了解决这个问题,我使用了一个React惰性加载来导入编辑器。
rjzwgtxy6#