Change background color of the parent element in CKEditor content

Question

I am using CKEditor and one thing I cannot figure out is how to change the background color of the parent that hold the elements that are inserted from the toolbar.

To be clear, I do not want to change the color of the CKEditor itself (like changing it to dark mode etc)

I'm referring to when I click a toolbar item like "Heading 1". A h1 element is added to the canvas of the CKEditor and I can style that h1 anyway I like. It's the canvas itself I want to style. In this case, change the background color.

I'm using Vue and I have this:

    <script setup>
    import { ref } from "vue";

    import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

    const editor = ref(ClassicEditor);
    const editorData = ref(
      "<div style='background-color:red;width:300px;height:300px;'><p>I want the entire background of the contents inside of the editor to be red (or any other color)</p></div>"
    );
    const editorConfig = ref({});
    </script>

Then in my template, I have this:

    <template>
      <img alt="Vue logo" src="./assets/logo.png" />

      <ckeditor
        :editor="editor"
        v-model="editorData"
        :config="editorConfig"
      ></ckeditor>
    </template>

This isn't doing what I want. Here is a codesandbox that implements the code: https://codesandbox.io/p/sandbox/vue-3-gyhpz4

I want to do this because I will eventually save the contents and retrieve them later.

How do I change (style) the canvas elements are sitting on an CKEditor?

Thanks

Answer 1

Set the value of --ck-color-base-background CSS variable in the #app or, more specifically, in the #app .ck-content:

#app .ck-content {
  --ck-color-base-background: red;
}