Loading...
Loading...
SunEditor v3용 사용자 지정 테마, 업로드 통합 및 이벤트 콜백 기능.
SunEditor에는 4개의 내장 테마가 포함되어 있습니다. CSS 파일을 가져와서 옵션에 테마 이름을 전달하세요.
se-theme-darkse-theme-midnightse-theme-cobaltse-theme-creamimport suneditor from 'suneditor';
// 1. Import the built-in theme CSS
import 'suneditor/src/themes/dark.css';
// 2. Pass theme name to options
const editor = suneditor.create(textarea, {
theme: 'dark', // 'dark' | 'midnight' | 'cobalt' | 'cream'
});
// 3. Change theme at runtime
editor.$.ui.setTheme('midnight');
editor.$.ui.setTheme(''); // Reset to default각 테마는 카테고리별로 정리된 약 130개의 CSS 사용자 정의 속성을 정의합니다. 이러한 속성을 재정의하여 편집기의 모든 부분을 사용자 지정할 수 있습니다.
편집 가능한 콘텐츠 영역(텍스트, 배경, 테두리)의 색상
--se-caret-color텍스트 커서 색상--se-edit-font-color편집기에서 기본 텍스트 색상--se-edit-background-color편집기 콘텐츠 배경--se-edit-border-*콘텐츠 영역 테두리 크기 조절 (밝음 → 어두움)--se-edit-anchor링크 강조 색상--se-edit-active / hover / outline선택, 마우스 오버, 포커스 시 윤곽선 색상도구 모음, 상태 표시줄 및 외부 셸 스타일 지정
--se-main-background-color툴바 및 셸 배경--se-main-color툴바 텍스트/아이콘 색상--se-main-border-color툴바 테두리 색상--se-hover-color (6 levels)6단계의 점진적 호버 색상--se-active-color (11 levels)11단계의 점진적 활성 색상다이얼로그 모달, 드롭다운 및 컨트롤러 표면
--se-modal-background-color모달 대화 상자 배경--se-modal-color모달 텍스트 색상--se-dropdown-font-color드롭다운 메뉴 텍스트 색상--se-controller-*컴포넌트 컨트롤러(이미지/비디오) 색상성공/오류 피드백 색상 및 로딩 표시기
--se-success-color (9 levels)9단계 성공 팔레트 (어두운 색 → 밝은 색)--se-error-color (9 levels)9단계 오류 팔레트(어두운 색 → 밝은 색)--se-loading-color로딩 스피너 색상총: 테마당 약 130개의 CSS 변수. 기본 제공되는 테마를 복사하여 시작점으로 삼고 색상을 수정하세요.
테마 선택자에 해당하는 모든 변수를 정의하는 CSS 파일을 생성하세요. 클래스 이름은 반드시 'se-theme-{name} 형식을 따라야 합니다.
모든 CSS 변수는 .sun-editor.se-theme-{name} 및 .sun-editor-editable.se-theme-{name} 선택자 아래에 정의하십시오.
/* my-theme.css */
.sun-editor.se-theme-ocean,
.sun-editor-editable.se-theme-ocean {
/* Caret & placeholder */
--se-caret-color: #e0f2fe;
--se-drag-caret-color: #38bdf8;
--se-placeholder-color: #64748b;
/* Text */
--se-edit-font-color: #e2e8f0;
--se-edit-font-pre: #94a3b8;
--se-edit-font-quote: #94a3b8;
/* Background */
--se-edit-background-color: #0f172a;
--se-edit-background-pre: #1e293b;
/* ... */
}앱에 CSS 파일을 불러오고 테마 옵션을 테마 이름과 일치하도록 설정하세요.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});