본문으로 건너뛰기

스타일링

에디터의 컨테이너와 하위 요소에 CSS 변수를 재정의하여 DHTMLX RichText의 외관을 사용자 정의할 수 있습니다.

이 가이드에서는 다크 테마를 적용하는 방법과 CSS 클래스 선택자를 사용하여 메뉴바, 툴바, 팝업, 콘텐츠 영역을 대상으로 스타일을 지정하는 방법을 설명합니다.

기본 구조와 클래스 이름​

RichText는 다음의 핵심 클래스를 사용하여 UI를 구성합니다.

클래스 이름설명
.wx-richtextRichText 위젯의 루트 컨테이너
.wx-richtext-menubar메뉴바 컨테이너
.wx-richtext-menu메뉴바 드롭다운 메뉴 컨테이너
.wx-richtext-toolbar툴바 컨테이너
.wx-editor-area주 편집 가능 콘텐츠 영역 컨테이너

이 클래스들을 사용자 정의 CSS 선택자에서 사용하여 에디터의 외관을 재정의할 수 있습니다.

기본 스타일 재정의​

기본 스타일을 재정의하려면 #root 컨테이너 또는 특정 하위 요소에서 CSS 변수를 재정의합니다.

<div id="root" style="width: 100%; height: 100%;"></div>

<style>
  #root,
  .wx-richtext-menu {
    --wx-background: #404151;
    --wx-background-alt: #212329;
    --wx-color-primary: #14B195;
    --wx-color-font: #FFFFFF;
    --wx-border: 1px solid #6B6C79;
    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
    --wx-button-active: rgba(20, 177, 149, 0.22);
    --wx-icon-color: var(--wx-color-font);
    --wx-color-font-alt: #9FA1AE;
    --wx-color-font-disabled: #9FA1AE;
    --wx-popup-border: var(--wx-border);

    color-scheme: dark;
  }

  .wx-richtext-menu {
    border: var(--wx-border);
  }
</style>
노트

이 스타일은 어두운 배경을 적용하고, 버튼 및 아이콘 색상을 조정하며, 다크 UI 테마에서의 가독성을 개선합니다.

지원되는 CSS 변수​

변수 이름설명
--wx-background에디터와 팝업의 배경색
--wx-background-alt메뉴바의 대체 배경색
--wx-color-primary링크, 인용구, 이미지 크기 조절 핸들의 강조 색상
--wx-color-font기본 글꼴 색상 (에디터, 메뉴바, 툴바에 적용)
--wx-color-font-alt대체 글꼴 색상
--wx-color-font-disabled비활성화된 텍스트 색상 (메뉴바 및 툴바 요소에 적용)
--wx-border에디터 전체에서 사용되는 테두리 스타일
--wx-color-secondary-hover메뉴바 및 툴바 내 버튼의 호버 상태 배경색
--wx-button-active메뉴바 및 툴바 내 버튼의 활성 상태 배경색
--wx-icon-color툴바 드롭다운 화살표 아이콘의 색상
--wx-popup-border팝업 요소의 테두리

권장 사항​

  • 다크 모드에서 기본 입력 요소의 스타일을 개선하려면 color-scheme: dark를 사용하세요.
  • 강한 이유 없이 레이아웃 관련 속성(display, position 등)을 변경하지 않는 것이 좋습니다.
팁

태그별 타이포그래피(글꼴 패밀리, 글꼴 크기, 색상, h1, p, blockquote 및 기타 블록 태그의 배경)를 지정하려면 defaultStyles 설정 속성에 적절한 CSS 규칙을 사용하세요. 전체 패턴은 설정 가이드를 참고하세요.

라이브 데모​

아래 예제는 RichText에 사용자 정의 스타일을 적용한 모습입니다.

관련 문서: 설정

Need more help?Contact Support