Problem/Motivation

We need to implement the `ckeditor_stylesheets` library within our `olivero.info.yml` file so that when the CKEditor builds the editor iframe, there are some default theme styling that gets displayed in the CKEditor body field.

Proposed resolution

Define the stylesheets for the different components/elements that are needed in the CKEditor.

ckeditor_stylesheets:
  - css/base/elements.css
  - css/components/captions.css
  - css/components/table.css
  - css/components/text-formatted.css
  - css/components/media-embed-error.css

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#20 interdiff_18-20.txt317 bytesboulaffasae
#20 implement_the_ckeditor_stylesheets_library-3124789-20.patch13.62 KBboulaffasae
#19 interdiff_16-18.txt13.92 KBkostyashupenko
#19 3124789-18.patch13.59 KBkostyashupenko
#16 Снимок экрана 2020-04-10 в 12.52.32.png230.7 KBkostyashupenko
#16 interdiff_10-16.txt1.58 KBkostyashupenko
#16 3124789-16.patch4.13 KBkostyashupenko
#10 Снимок экрана 2020-04-07 в 17.37.31.png206.47 KBkostyashupenko
#10 interdiff_8-10.txt2.89 KBkostyashupenko
#10 3124789-10.patch4.15 KBkostyashupenko
#8 3124789-8.patch2.35 KBkostyashupenko
#3 olivero-ckeditor-styles-3124789-3.patch484 bytesthejimbirch

Comments

proeung created an issue. See original summary.

proeung’s picture

proeung
she/her
commented
Issue summary: View changes
thejimbirch’s picture

thejimbirch commented
Status: Active » Needs review
StatusFileSize
new olivero-ckeditor-styles-3124789-3.patch484 bytes

Patch attached that adds the proposed stylesheets to the ckeditor.

proeung’s picture

proeung
she/her
commented
Status: Needs review » Needs work

@thejimbirch Thanks for picking up this issue and submitting a patch!

I just wanted to note that we don't currently have the following compiled `.css` file in our theme. In order for the CKeditor to pick up the right styling, we need to extract these into components that can be called in the `ckeditor_stylesheets` property. Please reference the Bartik implementation of exposing body styling within CKeditor. Thanks!

+++ b/olivero.info.yml
@@ -20,6 +20,12 @@ core: 8.x
+  - css/components/captions.css
+  - css/components/text-formatted.css
+  - css/components/media-embed-error.css
thejimbirch’s picture

thejimbirch commented
Status: Needs work » Needs review

Sorry, Misunderstood the Proposed resolution. Will take another look this weekend.

thejimbirch’s picture

thejimbirch commented
Status: Needs review » Needs work
proeung’s picture

proeung
she/her
commented

@thejimbirch No worries! I appreciate you taking a look at this issue.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review
StatusFileSize
new 3124789-8.patch2.35 KB
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work 
+++ b/js/ckeditor.js
@@ -0,0 +1,17 @@
+      console.log(CKEDITOR);

Debug code. 

+++ b/olivero.info.yml
@@ -40,3 +40,11 @@ libraries-override:
+  ckeditor/drupal.ckeditor:

This library never loads because Olivero is not active (and thus cannot extend or override a library). Is there another way to add the CSS class onto the body tag of CKeditor's iframe while in an administrative theme? I'm honestly not sure.

We might have to add a .cke_editable class to go along with the .text-content class within our CSS. I really don't know of another way to solve this.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review
StatusFileSize
new 3124789-10.patch4.15 KB
new interdiff_8-10.txt2.89 KB
new Снимок экрана 2020-04-07 в 17.37.31.png206.47 KB

Improved ckeditor styles and content styles in ckeditor-iframe, check the screen:
ckeditor olivero

1. console.log was removed of course
2.

This library never loads because Olivero is not active (and thus cannot extend or override a library). Is there another way to add the CSS class onto the body tag of CKeditor's iframe while in an administrative theme? I'm honestly not sure.

We might have to add a .cke_editable class to go along with the .text-content class within our CSS. I really don't know of another way to solve this.

Answering:
- What do you mean under "library never loads because Olivero is not active"?
- I don't know if there is some other way to add text-content to the body, since not much hooks here. What's the problem actually with that js? :)

I don't think it is good thing btw to add cke_editable selector into text-content.css

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

You don't like it is wrapped by drupal behavior?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

No, the issue is that the JS doesn't load for me, and so the text-content class is never added to the CKEditor iframe body,

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

which drupal version do you test?
With this issue on my side it's Drupal 8.9.x, standard profile

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

Hm.. but that library still exist even in 9.0.x https://git.drupalcode.org/project/drupal/-/blob/9.0.x/core/modules/cked...

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

I tested my patch against 9.1.x and it is still ok for admin/non-admin user, check my screen
ckeditor drupal 9

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
StatusFileSize
new 3124789-16.patch4.13 KB
new interdiff_10-16.txt1.58 KB
new Снимок экрана 2020-04-10 в 12.52.32.png230.7 KB

Just a reroll

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

I'm seeing the stylesheets being pulled in, and its starting to look good. However, the text-content CSS class is never added to the ckeditor iframe's body element because the Olivero theme is not active when CKEditor load

+++ b/olivero.info.yml
@@ -40,3 +40,11 @@ libraries-override:
+  ckeditor/drupal.ckeditor:

Does this make sense?

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review

Well, true...
1. libraries-extend for ckeditor/drupal.ckeditor was removed
2. js file removed
3. selector `cke_editable` added into text-content.css. Sad we don't use postcss-extend plugin (
4. some little improvements done with styles.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
StatusFileSize
new 3124789-18.patch13.59 KB
new interdiff_16-18.txt13.92 KB
boulaffasae’s picture

boulaffasae commented
StatusFileSize
new implement_the_ckeditor_stylesheets_library-3124789-20.patch13.62 KB
new interdiff_18-20.txt317 bytes

Hi kostyashupenko, mherchel

in Firefox Fonts tab it show DejaVu Serif as the used font, so i tried to add css/dist/base/fonts.css to the ckeditor_stylesheets.

Is it right ?

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

Good catch @boulaffasae, yes it is right

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community

Looking good!

+++ b/css/dist/theme/ckeditor.css
@@ -0,0 +1,5 @@
+.text-content .cke a{

This stylesheet in dist looks like it's left over from a previous patch. I'm omitting it from the commit.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Fixed

Committed! Thanks everyone!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.