Перейти к основному содержимому

Styling

Вы можете настроить внешний вид компонентов редактора, применяя специальные стили.

Определение CSS-класса для контейнера редактора​

<script setup>
   import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
  <Editor css="myBox" />
</template>

Эта возможность позволяет назначить CSS-класс главному контейнеру редактора. Атрибут css используется для применения пользовательских стилей к блоку редактора, что позволяет разработчикам изменять его визуальное оформление в соответствии с темой или макетом приложения.

В данном примере CSS-класс myBox должен быть заранее определён в таблице стилей. Это удобно, когда редактор должен соответствовать окружающим элементам интерфейса или иметь особые визуальные характеристики, например специфические отступы, рамки или цвета фона.

Отключение шрифтов​

Если вам нужно отключить шрифты, используемые в теме, воспользуйтесь свойством fonts темы и установите его в значение false:

<script setup>
  import { Willow } from "@svar-ui/vue-core";
  import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
  <div style="width:300px">
    <Willow :fonts="false">
      <Editor />
    </Willow>
  </div>
</template>
Обратите внимание

Если вы отключаете шрифты по умолчанию, вам придётся самостоятельно подключить нужные шрифты.

Связанные статьи: Визуальные темы