Loading...
Loading...
Vlastní šablony, integrace nahrávání a zpětná volání událostí pro SunEditor v3.
SunEditor je dodáván se 4 vestavěnými šablonami. Importujte soubor CSS a předejte název šablony do 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 defaultKaždé téma definuje přibližně 130 vlastních vlastností CSS uspořádaných do kategorií. Přepsáním těchto vlastností si můžete přizpůsobit libovolnou část editoru.
Barvy pro oblast upravitelného obsahu (text, pozadí, ohraničení)
--se-caret-colorBarva textového kurzoru--se-edit-font-colorVýchozí barva textu v editoru--se-edit-background-colorPozadí obsahu editora--se-edit-border-*Měřítko ohraničení oblasti obsahu (světlý → tmavý)--se-edit-anchorBarva zvýraznění odkazu--se-edit-active / hover / outlineBarvy obrysu pro výběr, myší a zaostřeníPanel nástrojů, stavový řádek a styl vnějšího pláště
--se-main-background-colorPozadí panelu nástrojů a shellu--se-main-colorBarva textu/ikony na panelu nástrojů--se-main-border-colorBarva okraje panelu nástrojů--se-hover-color (6 levels)6 progresivních úrovní tónu při vznášení--se-active-color (11 levels)11 progresivních aktivních úrovní tónůModální dialogová okna, rozbalovací nabídky a povrchy ovladačů
--se-modal-background-colorPozadí modálního dialogu--se-modal-colorBarva modálního textu--se-dropdown-font-colorBarva textu rozbalovací nabídky--se-controller-*Barvy řadiče komponent (obrázek/video)Barvy zpětné vazby o úspěchu/chybě a indikátory načítání
--se-success-color (9 levels)9úrovňová paleta úspěchu (tmavá → světlá)--se-error-color (9 levels)9úrovňová paleta chyb (tmavá → světlá)--se-loading-colorBarva načítacího spinneruCelkem: ~130 CSS proměnných na téma. Zkopírujte vestavěné téma jako výchozí bod a upravte barvy.
Vytvořte soubor CSS, který definuje všechny proměnné v selektoru vašeho motivu. Název třídy musí odpovídat vzoru: se-theme-{name}.
Definujte všechny CSS proměnné v selektorech .sun-editor.se-theme-{name} a .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;
/* ... */
}Importujte soubor CSS do aplikace a nastavte možnost motivu tak, aby odpovídala názvu motivu.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});