Loading...
Loading...
SunEditor v3 کے لیے حسب ضرورت تھیمز، اپ لوڈ انضمام، اور ایونٹ کال بیکس۔
سن ایڈیٹر 4 بلٹ ان تھیمز کے ساتھ بھیجتا ہے۔ سی ایس ایس فائل درآمد کریں اور تھیم کا نام اختیارات میں منتقل کریں۔
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 متغیر فی تھیم۔ ایک بلٹ ان تھیم کو اپنے نقطہ آغاز کے طور پر کاپی کریں اور رنگوں میں ترمیم کریں۔
ایک سی ایس ایس فائل بنائیں جو آپ کے تھیم کے سلیکٹر کے تحت تمام متغیرات کی وضاحت کرے۔ کلاس کا نام پیٹرن کی پیروی کرنا چاہیے: 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;
/* ... */
}اپنی ایپ میں سی ایس ایس فائل درآمد کریں اور تھیم کے آپشن کو اپنے تھیم کے نام سے ملنے کے لیے سیٹ کریں۔
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});