The editor, don't see, by blocks

As I want to change the editor, from block's The Editor window is white.

I cant see the editor icons and the menu-bar.

The site where it is /block/add/basic?destination=/admin/structure/block/block-content

CommentFileSizeAuthor
#13 Bildschirmfoto 2023-05-04 um 14.12.10.png66.65 KBfvd
#8 Bildschirmfoto 2023-05-03 um 18.17.45.png206.68 KBfvd
#5 Bildschirmfoto 2023-05-03 um 14.18.59.png104.99 KBfvd
#3 Bildschirmfoto 2023-05-03 um 07.36.13.png23.77 KBfvd
Bildschirmfoto 2023-05-02 um 17.54.12.png58.13 KBfvd
Bildschirmfoto 2023-05-02 um 17.47.33.png58.96 KBfvd

Comments

FvD created an issue. See original summary.

cilefen’s picture

cilefen commented
Status: Active » Postponed (maintainer needs more info)

Does the Einfaches HTML text format have the CKEditor enabled?

fvd’s picture

fvd commented
StatusFileSize
new Bildschirmfoto 2023-05-03 um 07.36.13.png23.77 KB

Yes the ckeditor 5 is enabled.

And the drupal version ist 10.0.8

cilefen’s picture

cilefen commented
Component: block.module » ckeditor5.module
Assigned: fvd » Unassigned

Are there any browser console errors?

fvd’s picture

fvd commented
StatusFileSize
new Bildschirmfoto 2023-05-03 um 14.18.59.png104.99 KB

I look at the chrome console.

I hope, that is what you think about.

But look

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +Needs steps to reproduce

Which themes are you using? Can you please export your editor.editor.basic_html and editor.editor.full_html config entities and attach them here?

Right now, the steps to reproduce this problem are missing. It's impossible for us to help you.

fvd’s picture

fvd commented

Now I have the Claro theme, the same.

Before the bootstrap5 3.0.7 theme.

The files what I have found for the search "editor.editor." are:
editor.editor.format_1.yml
editor.editor.format_2.yml
editor.editor.format_3.yml
editor.editor.gutenberg.yml
editor.editor.eu_test_text_format.yml
editor.editor.basic_html.yml

here the file: editor.editor.basic_html.yml

langcode: en
status: true
dependencies:
  config:
    - filter.format.basic_html
  module:
    - ckeditor
format: basic_html
editor: ckeditor
settings:
  toolbar:
    rows:
      -
        -
          name: Formatting
          items:
            - Bold
            - Italic
        -
          name: Linking
          items:
            - DrupalLink
            - DrupalUnlink
        -
          name: Lists
          items:
            - BulletedList
            - NumberedList
        -
          name: Media
          items:
            - Blockquote
            - DrupalImage
        -
          name: 'Block Formatting'
          items:
            - Format
        -
          name: Tools
          items:
            - Source
  plugins:
    stylescombo:
      styles: ''
image_upload:
  status: true
  scheme: public
  directory: inline-images
  max_size: ''
  max_dimensions:
    width: 0
    height: 0

The file "editor.editor.full_html.yml":

langcode: en
status: true
dependencies:
  config:
    - filter.format.full_html
  module:
    - ckeditor5
format: full_html
editor: ckeditor5
settings:
  toolbar:
    items:
      - bold
      - italic
      - strikethrough
      - superscript
      - subscript
      - removeFormat
      - '|'
      - link
      - '|'
      - bulletedList
      - numberedList
      - '|'
      - blockQuote
      - drupalInsertImage
      - insertTable
      - horizontalLine
      - '|'
      - heading
      - codeBlock
      - '|'
      - sourceEditing
  plugins:
    ckeditor5_heading:
      enabled_headings:
        - heading2
        - heading3
        - heading4
        - heading5
        - heading6
    ckeditor5_imageResize:
      allow_resize: true
    ckeditor5_list:
      reversed: true
      startIndex: true
    ckeditor5_sourceEditing:
      allowed_tags: {  }
image_upload:
  status: true
  scheme: public
  directory: inline-images
  max_size: ''
  max_dimensions:
    width: 0
    height: 0

Do you need the other files also?

fvd’s picture

fvd commented
StatusFileSize
new Bildschirmfoto 2023-05-03 um 18.17.45.png206.68 KB

The expand console messages...

fvd’s picture

fvd commented
cilefen’s picture

cilefen commented

The console errors would be more readable if you disable JavaScript aggregation, rebuild the cache and check again.

fvd’s picture

fvd commented

Without javascrip and cleared cache, there isn't something in the console errors

cilefen’s picture

cilefen commented

Without JavaScript aggregation, correct? Does the editor appear in that case?

fvd’s picture

fvd commented
StatusFileSize
new Bildschirmfoto 2023-05-04 um 14.12.10.png66.65 KB

uuups, forgot to reload the page...

now the message:

GET https://excample.com/core/themes/claro/images/menu-expanded.png 404

s_QjckxYY7d65OkDZ_kKnspyGUlRI9mSC-aM4xmMhrTbg.css:1

fvd’s picture

fvd commented

Now I change the theme to the bootstrap5 3.0.7, there isn't the 404 error. The console are white

cilefen’s picture

cilefen commented

I suggested disabling JavaScript aggregation, not disabling JavaScript.

fvd’s picture

fvd commented

ok, now the lines

_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790 Uncaught TypeError: t.widget is not a function
    at js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790:176
    at js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790:98
    at js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790:108
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:790
js_imBAFE-9x1N7dSyeaqYsQw41pYK0UK26HIoEAgEX5MU.js:274 Uncaught TypeError: Cannot destructure property 'isTabbable' of 'undefined' as it is undefined.
    at js_imBAFE-9x1N7dSyeaqYsQw41pYK0UK26HIoEAgEX5MU.js:274:16
    at js_imBAFE-9x1N7dSyeaqYsQw41pYK0UK26HIoEAgEX5MU.js:296:3
(anonym) @ js_imBAFE-9x1N7dSyeaqYsQw41pYK0UK26HIoEAgEX5MU.js:274
(anonym) @ js_imBAFE-9x1N7dSyeaqYsQw41pYK0UK26HIoEAgEX5MU.js:296
js_1jUdZvL6XKZt8VOIVQRpKpOgLzWrAiYa_-0aej3h6zE.js:746 Uncaught TypeError: Cannot set properties of undefined (setting 'ckeditor5')
    at js_1jUdZvL6XKZt8VOIVQRpKpOgLzWrAiYa_-0aej3h6zE.js:746:28
    at js_1jUdZvL6XKZt8VOIVQRpKpOgLzWrAiYa_-0aej3h6zE.js:1035:3
(anonym) @ js_1jUdZvL6XKZt8VOIVQRpKpOgLzWrAiYa_-0aej3h6zE.js:746
(anonym) @ js_1jUdZvL6XKZt8VOIVQRpKpOgLzWrAiYa_-0aej3h6zE.js:1035
js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1369 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1369:23
    at js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1376:3
(anonym) @ js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1369
(anonym) @ js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1376
js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:105 Uncaught TypeError: Drupal.toolbar.ToolbarModel is not a constructor
    at js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1108:23
    at Array.forEach (<anonymous>)
    at Object.attach (js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1106:59)
    at js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:207:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:203:34)
    at js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:729:12
    at HTMLDocument.listener (js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:717:7)
(anonym) @ js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1108
attach @ js_Bl1rHbdRjJuL1BH7MqZBeGvITKPztEWCAzub9XWVb_c.js:1106
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:207
Drupal.attachBehaviors @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:203
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:729
listener @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:717
setTimeout (async)
Drupal.throwError @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:104
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:209
Drupal.attachBehaviors @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:203
(anonym) @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:729
listener @ js_EaD9J8rIajgInRrG-rcH1SQqUeB_jfUt80Txmh6Fvi8.js:717
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Related issues: +#3314922: Aggregation breaks CKEditor 5

It sounds like this issue is a duplicate of #3314922: Aggregation breaks CKEditor 5.

Can you confirm? In other words: does the problem ONLY occur when JS and CSS aggregation are enabled? (And not when they're both disabled?)

cilefen’s picture

cilefen commented

Aggregation is still enabled in comment #16.

fvd’s picture

fvd commented

yes Wim Leers, that is the Issue #3314922: Aggregation breaks CKEditor 5

thanks

Now I disable css and javascript aggregation at /admin/config/development/performance that is from https://www.drupal.org/project/drupal/issues/3222107

And the menu from the ckeditor 5 is there, at all editor types!

But now, look what the console say

ntrolgroup.js:39 Uncaught TypeError: t.widget is not a function
    at controlgroup.js:39:10
    at controlgroup.js:32:3
    at controlgroup.js:19:1
(anonym) @ controlgroup.js:39
(anonym) @ controlgroup.js:32
(anonym) @ controlgroup.js:19
form-reset-mixin.js:34 Uncaught TypeError: Cannot set properties of undefined (setting 'formResetMixin')
    at form-reset-mixin.js:34:13
    at form-reset-mixin.js:29:3
    at form-reset-mixin.js:15:1
(anonym) @ form-reset-mixin.js:34
(anonym) @ form-reset-mixin.js:29
(anonym) @ form-reset-mixin.js:15
mouse.js:40 Uncaught TypeError: e.widget is not a function
    at mouse.js:40:10
    at mouse.js:30:3
    at mouse.js:15:1
(anonym) @ mouse.js:40
(anonym) @ mouse.js:30
(anonym) @ mouse.js:15
checkboxradio.js:40 Uncaught TypeError: Cannot read properties of undefined (reading 'formResetMixin')
    at checkboxradio.js:40:38
    at checkboxradio.js:35:3
    at checkboxradio.js:20:1
(anonym) @ checkboxradio.js:40
(anonym) @ checkboxradio.js:35
(anonym) @ checkboxradio.js:20
draggable.js:42 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
    at draggable.js:42:32
    at draggable.js:37:3
    at draggable.js:17:1
(anonym) @ draggable.js:42
(anonym) @ draggable.js:37
(anonym) @ draggable.js:17
resizable.js:41 Uncaught TypeError: Cannot read properties of undefined (reading 'mouse')
    at resizable.js:41:32
    at resizable.js:36:3
    at resizable.js:19:1
(anonym) @ resizable.js:41
(anonym) @ resizable.js:36
(anonym) @ resizable.js:19
button.js:44 Uncaught TypeError: t.widget is not a function
    at button.js:44:3
    at button.js:39:3
    at button.js:19:1
(anonym) @ button.js:44
(anonym) @ button.js:39
(anonym) @ button.js:19
dialog.js:49 Uncaught TypeError: i.widget is not a function
    at dialog.js:49:3
    at dialog.js:44:3
    at dialog.js:19:1
(anonym) @ dialog.js:49
(anonym) @ dialog.js:44
(anonym) @ dialog.js:19
widget.js:104 Uncaught TypeError: i is not a constructor
    at t.widget (widget.js:104:18)
    at dialog.jquery-ui.js?v=10.0.8:7:5
    at dialog.jquery-ui.js?v=10.0.8:75:3
t.widget @ widget.js:104
(anonym) @ dialog.jquery-ui.js?v=10.0.8:7
(anonym) @ dialog.jquery-ui.js?v=10.0.8:75
widget.js:81 Uncaught RangeError: Maximum call stack size exceeded
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
    at new t.<computed>.<computed> (widget.js:81:11)
t

Is that the thing Wim Leers, to solved this? https://www.drupal.org/project/drupal/issues/3222107#comment-15010558

Wiktor7 write it here: https://www.drupal.org/project/drupal/issues/3222107#comment-15033156

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

Interesting observation, @FvD! 😄 👏

You said in #3 you're on 10.0.8.

But #3222107: Library order asset weights do not work properly when a large number of javascript files is loaded between two jQuery UI libraries did not ship in a release until 10.0.9! See https://www.drupal.org/project/drupal/releases/10.0.9.

Can you please try updating to 10.0.9, clear all Drupal caches, clear all browser caches and then report back? 🙏

fvd’s picture

fvd commented

@Wim Leers, it works fine!😀

1. I update drupal to 10.0.9
2. switch java and css on: /admin/config/development/performance
3. flush all caches

4. Look at the blook editor page, and it works!

Great! 🤠🙏

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Category: Bug report » Support request
Status: Postponed (maintainer needs more info) » Fixed

Excellent!

So this was an unrelated core bug causing this, fixed since Drupal 10.0.9. Yay! 😊

Thanks for all your help and patience, @FvD!

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: -Needs steps to reproduce
Related issues: +#3222107: Library order asset weights do not work properly when a large number of javascript files is loaded between two jQuery UI libraries

Congrats on your first Drupal core issue credit! 😊

fvd’s picture

fvd commented

Thank's @Wim Leers 🤠🙏

Status: Fixed » Closed (fixed)

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