Loading...
Loading...
ערכות נושא מותאמות אישית, שילוב העלאות וקריאות חוזרות לאירועים עבור SunEditor גרסה 3.
SunEditor מגיע עם 4 ערכות נושא מובנות. יש לייבא את קובץ ה-CSS ולהעביר את שם ערכת הנושא ל-options.
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
});