Loading...
Loading...
Şablonên xwerû, entegrasyona barkirinê, û vegerandina bûyeran ji bo SunEditor v3.
SunEditor bi 4 şablonên çêkirî tê. Pelê CSS-ê import bike û navê şablonê ji options re bişîne.
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 mijarek nêzîkî 130 taybetmendiyên xwerû yên CSS-ê yên ku di kategoriyan de hatine rêzkirin destnîşan dike. Ji bo xwerûkirina her beşek ji edîtorê, wan serûbin bikin.
Rengên ji bo qada naveroka guherbar (nivîs, paşxane, sînor)
--se-caret-colorRengê nîşankerê nivîsê--se-edit-font-colorRengê nivîsê yê xwerû di edîtorê de--se-edit-background-colorPaşxaneya naveroka edîtorê--se-edit-border-*Pîvana sînorê qada naverokê (ronahî → tarî)--se-edit-anchorRengê ronîkirina lînkê--se-edit-active / hover / outlineHilbijartin, mêşvan, rengên xêzkirinê yên fokusêToolbar, statûya, û stîla şêlê derve
--se-main-background-colorPaşxaneya toolbar û qalikê--se-main-colorRengê nivîs/îkonê ya toolbarê--se-main-border-colorRengê sînorê darika amûran--se-hover-color (6 levels)6 astên dengê hoverê yên pêşverû--se-active-color (11 levels)11 astên dengê çalak ên pêşverûModalên diyalogê, daketî, û rûyên kontrolker
--se-modal-background-colorPaşxaneya diyaloga modal--se-modal-colorRengê nivîsa modal--se-dropdown-font-colorRengê nivîsê yê menuyê daketî--se-controller-*Rengên kontrolkera pêkhateyan (wêne/vîdyo)Rengên bersiva serkeftin/çewtiyê û nîşaneyên barkirinê
--se-success-color (9 levels)Paleta serkeftinê ya 9-astî (tarî → ronahî)--se-error-color (9 levels)Paleta çewtiyê ya 9-astî (tarî → ronahî)--se-loading-colorRengê zivirandinê tê barkirinBi tevahî: ~130 guherbarên CSS ji bo her mijarekê. Mijarek çêkirî wekî xala destpêkê kopî bikin û rengan biguherînin.
Pelê CSS-ê biafirîne ku hemî guherbarên di bin hilbijêra mijara xwe de destnîşan bike. Navê polê divê li gorî vê şablonê be: se-theme-{name}.
Hemû guherbarên CSS-ê di bin hilbijêrên .sun-editor.se-theme-{name} û .sun-editor-editable.se-theme-{name} de destnîşan bikin.
/* 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;
/* ... */
}Pelê CSS-ê têxe nav sepanê xwe û vebijarka mijarê li gorî navê mijara xwe bicîh bike.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});