时间戳

首页 > 解决方案 > 用于 Angular 的 CKEditor5，用于图像的 Base64UploadAdapter 不起作用

angular - 用于 Angular 的 CKEditor5，用于图像的 Base64UploadAdapter 不起作用

问题描述

我在为我的 Angular 应用程序实现 CKEditor5 时遇到问题。我的班级如下所示：

import * as customEditor from './ckeditor5';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

export class MemoComponent extends BaseFieldComponent implements OnInit {
    public customEditor = customEditor;
    public environment = environment;
    public config = {
        language: this.environment.locale,
        toolbar: [
            'undo',
            'redo',
            '|',
            'heading',
            'fontFamily',
            'fontSize',
            '|',
            'bold',
            'italic',
            'underline',
            'fontColor',
            'fontBackgroundColor',
            'highlight',
            '|',
            'link',
            'CKFinder',
            'imageUpload',
            'mediaEmbed',
            '|',
            'alignment',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'insertTable',
            'blockQuote',
            'specialCharacters',
        ],
        plugins: [Base64UploadAdapter],
    };

但是，如果我评论“插件：[Base64UploadAdapter]”，它可以正常工作，但我无法将图像作为 base64 添加到 CKEditor5，如果我取消注释该行，我会收到“CKEditorError：ckeditor-duplicated-modules”。你能告诉我我做错了什么吗？

标签： angulartypescriptckeditor5

解决方案

当我尝试将图像上传为 base64 时，我遇到了同样的问题。尝试以下步骤希望它会有所帮助

第 1 步：对配置进行以下更改

public config = {
    language: this.environment.locale,
    toolbar: [ ... ],
    ckfinder: {
      options: {
          resourceType: 'Images'
      },
    },
 }

我希望您已正确安装正确的软件包

npm install --save @ckeditor/ckeditor5-upload

第 2 步：然后转到 ckeditor.js 导入 Base64UploadAdapter

在此处输入图像描述

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

第 3 步：确保将 base64uploadadapter 添加到 builtinPlugins，您可以在同一个 ckeditor.js 文件中找到它

Editor.builtinPlugins = [
       Base64UploadAdapter
]

第 4 步：构建 ckeditor（此步骤至关重要，否则 Angular 项目中不会出现任何更改）

npm run-script build

有关更多详细信息，请访问Base64 上传适配器- CKEditor 5 文档

推荐阅读