https://github.com/emagtechlabs/ckeditor5-classic-image-resize
CKEditor5 Classic Image Resize Plugin
https://github.com/emagtechlabs/ckeditor5-classic-image-resize
ckeditor5 toolbar-inputs
Last synced: 8 months ago
JSON representation
CKEditor5 Classic Image Resize Plugin
- Host: GitHub
- URL: https://github.com/emagtechlabs/ckeditor5-classic-image-resize
- Owner: eMAGTechLabs
- Created: 2020-06-18T12:39:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-28T15:16:22.000Z (over 3 years ago)
- Last Synced: 2025-09-30T16:23:24.365Z (8 months ago)
- Topics: ckeditor5, toolbar-inputs
- Language: JavaScript
- Size: 79.1 KB
- Stars: 7
- Watchers: 7
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# ckeditor5-classic-image-resize
CKEditor5 Classic Image Resize Plugin
This plugin allows you to edit the size of an image using width and height input, as well as providing an aspect ratio lock tool that makes it easy to scale without distorting the image.
# Installation
```
npm i @emagtechlabs/ckeditor5-classic-image-resize
```
or
```
yarn add @emagtechlabs/ckeditor5-classic-image-resize
```
# Usage
Update src/ckeditor.js with:
```javascript
import ClassicImageResize from '@emagtechlabs/ckeditor5-classic-image-resize';
Editor.builtinPlugins = [
// ...
ClassicImageResize,
// ...
];
Editor.defaultConfig = {
// ...
image: {
toolbar: [
// ...
'imageSize:lockAspectRatio',
'imageSize:width',
'imageSize:height',
// ...
]
},
// ...
};
```
Then
```
npm run build
```
or
```
yarn build
```
# How it works
### Upcasting
The plugin "upcasts" (reads from the DOM) the image `![]()
` *style* attribute, checks for `width:` and `height:` and adds the values to the toolbar inputs.
### Editing
While editing, the *aspect ratio lock* can be used for scaling the image using its native aspect ratio. (note: it will only scale on the width axis)
### Downcasting
The plugin "downcasts" (writes to the DOM) the *style* attribute for both the `![]()
` tag and the `` tag. This happens because images in ckeditor5 are wrapped in `` tags.
# Issues
Feel free to submit issues and enhancement requests.