CKEditor 5 图像大小调整 Angular
CKEditor 5 image resize in Angular
我在 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>
我遇到了同样的问题,但最终解决了。
基本上,我遵循了此处概述的步骤:
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。而已!插件现在应该按照描述工作。请注意,您需要随时重新构建以添加其他插件。
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>
我在 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>
我遇到了同样的问题,但最终解决了。
基本上,我遵循了此处概述的步骤: 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。而已!插件现在应该按照描述工作。请注意,您需要随时重新构建以添加其他插件。
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>