CKEditor 5 图像大小调整 Angular

Question

我在 Angular 项目中安装了 CKEditor5，它工作正常，但我在调整图像大小时遇到问题。我在 link: https://ckeditor.com/docs/ckeditor5/latest/features/image.html#installation 中看到了文档，但我无法正确实施它。 ImageResize 是唯一一个默认不激活的插件，我该如何激活？在哪里？

我试图将它添加为插件，但我有一个错误，说有 CKEditor5 的重复声明这是关于 CKEditor

的组件代码

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/it';

  public Editor = ClassicEditor;

  public config = {
    language: 'it',
    placeholder: 'Descrivi il tuo procedimento scrivendo e inserendo immagini',
    ckfinder: {

      uploadUrl: environment.laravel_api+'/upload-image-step?command=QuickUpload&type=Images&responseType=json',

      options: {
        resourceType: 'Images'
      }
    },
    image: {
      resizeUnit:'%',
      toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],

      styles: [

        'full',

        'alignLeft',

        'alignRight'
      ],

    },

  };

看来我有这个

<ckeditor id="editor" style="width: 100%;" [editor]="Editor" [config]="config" data="" formControlName="editor"></ckeditor>

Answer 1

我遇到了同样的问题，但最终解决了。

基本上，我遵循了此处概述的步骤： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

要点是，如果您需要插件，只需使用自定义模块即可。

下面大致是我做的（使用Angular9）...

首先，创建自定义构建

1.克隆基础仓库。 我最终将它克隆到我的 Angular 应用程序

中的 /assets 目录中

git clone https://github.com/ckeditor/ckeditor5-build-classic.git

2。在新克隆的 repo 中，安装 @ckeditor/ckeditor5-image 包

cd ckeditor5
npm install --save @ckeditor/ckeditor5-image

3。打开并编辑 src/ckeditor.js 文件，导入 ImageResize

import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
...

4.在同一个 src/ckeditor.js 文件中，将 ImageResize 添加到插件列表

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    Alignment,
    ImageResize, // <----
    ...
];

5.保存文件并构建

npm run build

然后，在您的 Angular 应用程序中使用构建

1.首先，确保你有 CKEditor Angular 组件，它仍然需要在你的应用程序模块中定义

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
...
imports: [
    CKEditorModule
    ...
]

2。最后，在组件内部使用新的自定义 CKEditor 构建，而不是之前使用的基础组件：

// Your existing code, which is using a pre-built build
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

应更改为指向 /assets 目录中的新自定义项

// Obviously, change to suit your directory structure
import * as ClassicEditor from '../../assets/ckeditor5';

3。而已！插件现在应该按照描述工作。请注意，您需要随时重新构建以添加其他插件。

Answer 2

import * as ClassicEditor from '../../assets/ckeditor5';

export class ContainerPreguntasComponent implements OnInit, OnDestroy {
title = 'angular-ckeditor-test';
  editor = ClassicEditor; //DecoupledEditor;
  config = {
    placeholder: 'Enunciado de la pregunta.',
    language: 'es',
    image: {
      toolbar: [
        'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
        '|',
        'imageStyle:full',
        'imageStyle:side',
        '|',
        'imageTextAlternative'
      ],
      styles: [
        'full',
        'side',
        'alignLeft', 'alignCenter', 'alignRight'
      ],
      resizeOptions: [
        {
            name: 'imageResize:original',
            label: 'Original',
            value: null
        },
        {
            name: 'imageResize:50',
            label: '50%',
            value: '50'
        },
        {
            name: 'imageResize:75',
            label: '75%',
            value: '75'
        }
    ],
    },
    // Agregas la clase  MyCustomUploadAdapterPlugin para subir imagnes 
    extraPlugins: [MyCustomUploadAdapterPlugin] }
}

 <ckeditor [editor]="editor" [config]="config" (ready)="onReady($event)" ></ckeditor>

CKEditor 5 图像大小调整 Angular

CKEditor 5 image resize in Angular

angular

image-resizing

ckeditor5

首先，创建自定义构建

然后，在您的 Angular 应用程序中使用构建