search

Mati365 / ckeditor5-rails

🚀 CKEditor 5 Ruby gem - seamless integration with Rails through web components and helper methods. 💎 Supports both GPL and commercial licenses with flexible CDN options and translations. 🎨 Easy configuration with presets, extensive plugin system, and modern async loading.
https://ckeditor.com/
GNU General Public License v2.0
21 stars 1 forks source link

Setting the height and width using the style attribute is not increasing the size of the text box. #5

Closed dil-bparihar closed 2 weeks ago

dil-bparihar commented 2 weeks ago

🐛 Bug Report

Setting the height and width using the style attribute is not increasing the size of the text box.

🔍 Bug Description

A clear and concise description of what the bug is.

📝 Steps to Reproduce

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

✅ Expected Behavior

The CKEditor5 text box should adjust its height and width according to the values specified in the style attribute. For example, if style="height: 400px; width: 600px;" is applied, the text box should appear with a height of 400 pixels and a width of 600 pixels. A clear and concise description of what you expected to happen.

❌ Actual Behavior

The CKEditor5 text box does not change its size according to the specified style attributes. Despite setting height and width using inline styles, the text box remains at its default size and does not expand to the specified dimensions. A clear and concise description of what actually happened.

📸 Screenshots

image

If applicable, add screenshots to help explain your problem.

📋 Additional Context

= ckeditor5_editor initial_data: @body, name: 'email[body]',style: 'height: 300px;'

Mati365 commented 2 weeks ago

@dil-bparihar It's not an issue in the integration itself, as it's how CKEditor 5 supposed to work. Afair, you have to set CSS style directly on editable, like this:

.ck-editor__editable { min-height: 150px; }

In order to make it work. It's a good idea to extend API of integration though, as it's not trivial.

dil-bparihar commented 2 weeks ago

Is it possible to configure CSS properties like height or width for the .ck-editor__editable class in the CKEditor configuration (e.g., using a configuration like ckeditor: { height: "400px" }), without having to write inline CSS for each individual editor?

@Mati365

Mati365 commented 2 weeks ago

@dil-bparihar Nope, you can use css class or even id and then style it using .ck-editor__editable selector. I'll try to extend the API a bit to use a custom plugin to archive this.

Mati365 commented 2 weeks ago

@dil-bparihar I introduced editable_height attribute to the editor, it's now possible: https://github.com/Mati365/ckeditor5-rails/commit/1caeec9e00be16b6f6031f36b14764e7ce4a223f. Please install 1.7.0 version.

dil-bparihar commented 2 weeks ago

Thanks @Mati365 Its working and helps a lot.