温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - CKEditor 5 image resize in Angular
angular ckeditor5 image-resizing

其他 - Angular中的CKEditor 5图像大小调整

发布于 2020-06-29 05:16:29

我在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>

查看更多

提问者
Drilon Hametaj
被浏览
14
Jesse Williams 2020-05-30 17:10

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

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

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

以下大致是我所做的(使用Angular 9)...

首先,创建自定义版本

1.克隆基础仓库。 我最终将其克隆到/assetsAngular应用程序目录中

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

2.在新克隆的仓库中,安装@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.就这样!插件现在应该可以按照说明工作了。只需注意,您想在任何时候添加其他插件都需要重新构建。