Я использую CKEditor, и я не могу понять одну вещь: как изменить цвет фона родительского элемента, содержащего элементы, вставленные с панели инструментов.
Чтобы внести ясность, я не хочу менять цвет самого CKEditor (например, менять его на темный режим и т. д.).
Я имею в виду, когда я нажимаю на элемент панели инструментов, например «Заголовок 1». Элемент h1 добавляется на холст CKEditor, и я могу стилизовать его так, как мне нравится. Я хочу стилизовать сам холст. В этом случае измените цвет фона.
Я использую Vue, и у меня есть это:
<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>
Тогда в моем шаблоне у меня есть это:
<template>
<img alt = "Vue logo" src = "./assets/logo.png" />
<ckeditor
:editor = "editor"
v-model = "editorData"
:config = "editorConfig"
></ckeditor>
</template>
Это не то, что я хочу. Вот коды и ящик, который реализует код: https://codesandbox.io/p/sandbox/vue-3-gyhpz4
Я хочу это сделать, потому что в конечном итоге я сохраню содержимое и получу его позже.
Как изменить (стиль) элементы холста, находящиеся в CKEditor?
Спасибо
Если это элемент div, содержащий элементы, добавленные с панели инструментов, то да.
Он содержит все: элементы, добавленные с панели инструментов, и элементы, введенные пользователем вручную. Для панели инструментов нет отдельного контейнера.
Ладно, круто. Есть ли способ стилизовать его?
Да, его можно стилизовать с помощью CSS — я только что опубликовал ответ.
Установите значение CSS-переменной --ck-color-base-background
в #app
или, точнее, в #app .ck-content
:
#app .ck-content {
--ck-color-base-background: red;
}
Да, это сработало. Я могу добавить динамические изменения сам, теперь, когда знаю, что менять. Спасибо
Просто чтобы быть уверенным: хотите ли вы оформить
contenteditable
div, содержащий содержимое?