Loading...
Loading...
قالبهای سفارشی، ادغام آپلود و فراخوانیهای رویداد برای SunEditor نسخه ۳.
SunEditor با ۴ قالب از پیش ساخته شده ارائه میشود. فایل 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هر قالب حدود ۱۳۰ ویژگی سفارشی 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)۶ سطح صدای شناور پیشرفته--se-active-color (11 levels)۱۱ سطح تُن فعال پیشروندهماژولهای دیالوگ، منوهای کشویی و سطوح کنترلر
--se-modal-background-colorپسزمینهی دیالوگ مودال--se-modal-colorرنگ متن مودال--se-dropdown-font-colorرنگ متن منوی کشویی--se-controller-*رنگهای کنترلکننده اجزا (تصویر/ویدئو)رنگهای بازخورد موفقیت/خطا و نشانگرهای بارگیری
--se-success-color (9 levels)پالت موفقیت ۹ سطحی (تیره → روشن)--se-error-color (9 levels)پالت خطای ۹ سطحی (تیره → روشن)--se-loading-colorبارگیری رنگ اسپینرمجموع: حدود ۱۳۰ متغیر CSS برای هر قالب. یک قالب داخلی را به عنوان نقطه شروع کپی کنید و رنگها را تغییر دهید.
یک فایل CSS ایجاد کنید که تمام متغیرهای زیر مجموعه انتخابگر قالب شما را تعریف کند. نام کلاس باید از الگوی زیر پیروی کند: se-theme-{name}.
تمام متغیرهای CSS را در زیر انتخابگرهای .sun-editor.se-theme-{name} و .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;
/* ... */
}فایل 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
});