Loading...
Loading...
Temas personalizados, integração de uploads e retornos de chamada de eventos para o SunEditor v3.
O SunEditor vem com 4 temas integrados. Importe o arquivo CSS e passe o nome do tema para as opções.
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 defaultCada tema define cerca de 130 propriedades CSS personalizadas, organizadas em categorias. Substitua-as para personalizar qualquer parte do editor.
Cores para a área de conteúdo editável (texto, fundos, bordas)
--se-caret-colorCor do cursor de texto--se-edit-font-colorCor padrão do texto no editor--se-edit-background-colorConteúdo do editor em segundo plano--se-edit-border-*Escala da borda da área de conteúdo (claro → escuro)--se-edit-anchorCor de destaque do link--se-edit-active / hover / outlineSeleção, passar o cursor, cores de contorno de focoEstilo da barra de ferramentas, barra de status e shell externo
--se-main-background-colorFundo da barra de ferramentas e do shell--se-main-colorCor do texto/ícone da barra de ferramentas--se-main-border-colorcor da borda da barra de ferramentas--se-hover-color (6 levels)6 níveis progressivos de tom de sobreposição--se-active-color (11 levels)11 níveis progressivos de tom ativoModais de diálogo, menus suspensos e superfícies de controle
--se-modal-background-colorFundo da caixa de diálogo modal--se-modal-colorCor do texto modal--se-dropdown-font-colorcor do texto do menu suspenso--se-controller-*Cores do controlador de componentes (imagem/vídeo)Cores de feedback de sucesso/erro e indicadores de carregamento
--se-success-color (9 levels)Paleta de sucesso de 9 níveis (escuro → claro)--se-error-color (9 levels)Paleta de erros de 9 níveis (escuro → claro)--se-loading-colorCarregando cor do indicador de carregamentoTotal: aproximadamente 130 variáveis CSS por tema. Copie um tema predefinido como ponto de partida e modifique as cores.
Crie um arquivo CSS que defina todas as variáveis sob o seletor do seu tema. O nome da classe deve seguir o padrão: se-theme-{name}.
Defina todas as variáveis CSS nos seletores .sun-editor.se-theme-{name} e .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;
/* ... */
}Importe o arquivo CSS em seu aplicativo e defina a opção de tema para corresponder ao nome do seu tema.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});