Loading...
Loading...
السمات المخصصة، وتكامل التحميل، واستدعاءات الأحداث لبرنامج SunEditor الإصدار 3.
يأتي برنامج SunEditor مزودًا بأربعة قوالب جاهزة. استورد ملف 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
});