Блог

Я использую CKEditor 5 с фреймворком React. Как установить темно-серый фон редактора, если редактор отключен?

Я использую этот CSS, чтобы установить белый фон при включении:

 .ck .ck-editor__main > .ck-editor__editable {
  background: #FFF;
}
 

Однако я хочу изменить значение цвета фона на серый только в том случае, если дочерний div имеет .ck-read-only , но :has() не поддерживает браузер.

.например, это НЕ работает, потому что браузеры еще не поддерживают :has()

 .ck .ck-editor__main > .ck-editor__editable :has(> div.ck-read-only) {
  background: #C3C3C3;
}
 

Реализация компонента

                 <CKEditor
                  disabled={true}
                  editor={Editor}
                  config={{
                    toolbar: [
                      'bold',
                      'italic',
                      'underline',
                      'bulletedList',
                      'numberedList',
                      'link',
                      '|',
                      'imageUpload'
                    ],
                    placeholder: 'Start writing your note'
                  }}
                  onReady={editor => {
                    console.log('Editor is ready to use!', editor);
                  }}
                  onChange={(event, editor) => {
                    const data = editor.getData();
                    console.log({ event, editor, data });
                  }}
                />
 

Ой, я ошибся в своем селекторе и в том, где были прикреплены классы. Это позволяет мне устанавливать цвет фона при отключении:

 .ck .ck-editor__main > .ck-editor__editable.ck-read-only {
  background: #C3C3C3;
}