Optimize your CKEditor 5 editing space with the ResizableHeight plugin. This plugin adds the ability to set the height of the editor and also change its size. Adds the ability to resize. This plugin is compatible with various browsers including Chrome, Firefox, Safari, Edge and Internet Explorer, among others. It supports both the latest and older versions of these browsers and is optimized for devices such as iPhone, iPad, Android devices and desktop computers.
If you find this plugin useful, consider supporting the author to create and maintain more open-source projects. Every contribution, however big or small, is very valuable.
Before you begin, ensure you have the following dependencies installed:
Install them using npm:
npm install --save @ckeditor/ckeditor5-core
Using npm:
npm install @pikulinpw/ckeditor5-resizableheight
Manual Installation:
'ResizableHeight'
to your editor's plugin list:import ResizableHeight from '@pikulinpw/ckeditor5-resizableheight';
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [ ..., ResizableHeight, ...],
toolbar: [ ..., ...]
})
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error.stack);
});
The ResizableHeight plugin provides several configuration options to customize the editor's behavior. You can specify these options either in the CKEditor configuration object or directly through HTML attributes on the editor's element.
resize
: A boolean value that determines whether the editor should be resizable. Default is true
.height
: Specifies the initial height of the editor. It can be any valid CSS height value.minHeight
: Specifies the minimum height to which the editor can be resized. It can be any valid CSS height value.maxHeight
: Specifies the maximum height to which the editor can be resized. It can be any valid CSS height value.import ResizableHeight from '@pikulinpw/ckeditor5-resizableheight';
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [ ..., ResizableHeight, ...],
ResizableHeight: {
resize: false,
height: '500px',
minHeight: '100px',
maxHeight: '1000px'
}
})
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error.stack);
});
You can also set the height, minimum height, and maximum height using the data-height
, data-minheight
, and data-maxheight
attributes respectively on the editor's HTML element:
<div id="editor" data-height="500px" data-minheight="100px" data-maxheight="1000px">...</div>
By using these attributes, you can define the height and its constraints directly in the HTML, without modifying the JavaScript configuration.
You can customize the appearance and behavior of the ResizableHeight plugin by tweaking the source code. All the necessary files (including styles) are available in the source code.
This project is licensed under the MIT License. See the LICENSE file for details.
Feedback, bug reports, and pull requests are welcome. Feel free to open an issue or submit a pull request if you have something to contribute.