reactjs CK编辑器错误:ckeditor复制模块:某些CKEditor 5模块重复

xghobddn  于 2023-03-08  发布在  React
关注(0)|答案(6)|浏览(451)
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';


获取ckeditor 5重复模块错误。任何人都可以帮助我。提前感谢。

kmbjn2e3

kmbjn2e31#

这是因为您正在导入插件的构建!为了添加插件,您必须进行个人构建。请阅读此页面了解更多信息:ckeditor offical documentation。他们甚至有一个官方的在线构建器,为你做所有的工作!:ckeditor online builder一旦你创建了它,你必须导入编辑器,就像你之前在第2行所做的那样,但是你必须从“你的个人构建的构建文件夹的地址”写入,而不是从“@ckeditor/ckeditor 5-build-classic”写入。
希望对你有帮助。

k5hmc34c

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
        }
      }
    }
  }

就是这样:)

0wi1tuuw

0wi1tuuw3#

注意:我们不再使用@ckeditor/ckeditor5-build-classic!

    • 错误**:import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    • 正确**:import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
w9apscun

w9apscun4#

我也遇到过类似的问题,我安装了一个版本的所有模块后就解决了

apeeds0o

apeeds0o5#

当我尝试在不同的页面上使用编辑器时,我遇到过这个问题。尝试了上面写的所有东西,没有任何帮助。为了解决这个问题,我使用了一个React惰性加载来导入编辑器。

rjzwgtxy

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'
                    ]
                },
            },

相关问题