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

编程问答 2022-05-02

问题描述

我在为我的 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”。 你能告诉我我做错了什么吗？

解决方法

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

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

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

希望你正确安装了正确的包

npm install --save @ckeditor/ckeditor5-upload

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

enter image description here

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 upload adapter - CKEditor 5 文档

angularangularckeditor5typescripttypescripttypescript