时间戳

首页 > 解决方案 > CKEditor 5在Angular中调整图像大小

angular - CKEditor 5在Angular中调整图像大小

问题描述

我在 Angular 项目中安装了 CKEditor5，它工作正常，但我在调整图像大小时遇到​​了问题。我在此链接中看到了文档：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>

标签： angularimage-resizingckeditor5

解决方案

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

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

要点是，如果您需要插件，您只需使用自定义构建的模块。

以下大致是我所做的（使用Angular 9）......

首先，创建自定义构建

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

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组件，它仍然需要在你的app模块中定义

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.就是这样！插件现在应该按描述工作。请注意，只要您想添加其他插件，就需要重新构建。

推荐阅读