Loading...
Loading...
SunEditor v3 的自定义主题、上传集成和事件回调。
SunEditor 内置了 4 个主题。导入 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}。
在 .sun-editor.se-theme-{name} 和 .sun-editor-editable.se-theme-{name} 选择器下定义所有 CSS 变量。
/* 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
});