Loading...
Loading...
SunEditor v3 için özel temalar, yükleme entegrasyonu ve olay geri çağırma işlevleri.
SunEditor, 4 adet yerleşik tema ile birlikte gelir. CSS dosyasını içe aktarın ve tema adını seçeneklere iletin.
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 defaultHer tema, kategoriler halinde düzenlenmiş yaklaşık 130 CSS özel özelliğini tanımlar. Bunları geçersiz kılarak düzenleyicinin herhangi bir bölümünü özelleştirebilirsiniz.
Düzenlenebilir içerik alanı için renkler (metin, arka planlar, kenarlıklar)
--se-caret-colorMetin imleci rengi--se-edit-font-colorEditördeki varsayılan metin rengi--se-edit-background-colorEditör içeriğinin arka planı--se-edit-border-*İçerik alanı kenar ölçeği (açık → koyu)--se-edit-anchorBağlantı vurgu rengi--se-edit-active / hover / outlineSeçim, fareyle üzerine gelme, odaklanma ana hat renkleriAraç çubuğu, durum çubuğu ve dış kabuk stili
--se-main-background-colorAraç çubuğu ve kabuk arka planı--se-main-colorAraç çubuğu metni/simge rengi--se-main-border-colorAraç çubuğu kenar rengi--se-hover-color (6 levels)6 kademeli ilerleyen ses tonu seviyesi--se-active-color (11 levels)11 kademeli aktif ton seviyesiDiyalog pencereleri, açılır menüler ve kontrol yüzeyleri
--se-modal-background-colorModal iletişim kutusu arka planı--se-modal-colorModal metin rengi--se-dropdown-font-colorAçılır menü metin rengi--se-controller-*Bileşen kontrolcüsü (görüntü/video) renkleriBaşarı/hata geri bildirim renkleri ve yükleme göstergeleri
--se-success-color (9 levels)9 seviyeli başarı paleti (koyu → açık)--se-error-color (9 levels)9 seviyeli hata paleti (koyu → açık)--se-loading-colorYükleme göstergesi rengiToplam: Tema başına yaklaşık 130 CSS değişkeni. Başlangıç noktası olarak yerleşik bir temayı kopyalayın ve renkleri değiştirin.
Tema seçiciniz altındaki tüm değişkenleri tanımlayan bir CSS dosyası oluşturun. Sınıf adı şu kalıba uymalıdır: se-theme-{name}.
Tüm CSS değişkenlerini .sun-editor.se-theme-{name} ve .sun-editor-editable.se-theme-{name} seçicileri altında tanımlayın.
/* 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 dosyasını uygulamanıza aktarın ve tema seçeneğini tema adınızla eşleşecek şekilde ayarlayın.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});