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
});