스타일링

에디터 컴포넌트의 외관은 특정 스타일을 적용하여 커스터마이징할 수 있습니다.

에디터 박스에 CSS 클래스 정의하기

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

<Editor css="myBox" />

이 기능을 사용하면 에디터의 메인 컨테이너 요소에 CSS 클래스를 지정할 수 있습니다. css 속성을 통해 에디터 박스에 커스텀 스타일을 적용하여, 애플리케이션의 테마나 레이아웃에 맞게 시각적 디자인을 수정할 수 있습니다.

이 예제에서 myBox CSS 클래스는 스타일시트에 미리 정의되어 있어야 합니다. 에디터를 주변 UI 요소에 맞추거나 특정 패딩, 테두리, 배경색 등 고유한 시각적 특성을 부여해야 할 때 유용합니다.

폰트 비활성화

테마에서 사용하는 폰트를 비활성화해야 하는 경우, 테마의 fonts 속성을 false로 설정하면 됩니다:

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

<div style="width:300px">
  <Willow fonts={false}>
    <Editor />
  </Willow>
</div>

주의사항

기본 폰트를 비활성화한 경우, 필요한 폰트를 직접 포함시켜야 합니다.

관련 문서: 비주얼 테마