Contrib.social

Dark and Light themes override CKEDITOR 5 textarea color

Open on Drupal.org →
Created on 9 May 2023, over 1 year ago
Updated 18 May 2023, over 1 year ago

Problem/Motivation

Currently, CKEditor5 editing area's color is getting overwritten by the Bootstrap Styles themes. The reason is that there is no longer an iframe that encapsulates the CKEditor editing area. It also impacts the source editing area's height.

Classic editor (CKEditor 5) no longer encapsulates the editing area in an

, which means that the height (and similar options) of the editing area can be easily controlled with CSS.
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/...

Steps to reproduce

  1. Install and enable the modules below:
    • Bootstrap Layout builder
    • Bootstrap Styles
    • Layout builder blocks
    • Layout builder modal
  2. Enable LB for Basic page content type.
  3. Create a new Basic page, and go to the layout edit page
  4. Add a new custom basic block

Proposed resolution

Color issue:
  • Remove the color from the `#layout-builder-modal` and `#layout-builder-modal form`
  • Add the color to form-item and skip for form-item elements that contain `.js-text-format-wrapper` and `.ck-editor__main`
Source editing textarea's height issue:
  • add a rule to skip the source editing div .ck-source-editing-area)

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Closed: duplicate

Version

1.1

Component

User interface

Created by

🇧🇷Brazil andre.bonon

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024