Loading...
Loading...
ស្បែកផ្ទាល់ខ្លួន ការរួមបញ្ចូលការផ្ទុកឡើង និងការហៅត្រឡប់ព្រឹត្តិការណ៍សម្រាប់ SunEditor v3.
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 ចំនួន ~130 ដែលរៀបចំជាប្រភេទ។ បដិសេធពួកវាដើម្បីប្ដូរផ្នែកណាមួយនៃកម្មវិធីនិពន្ធតាមបំណង។
ពណ៌សម្រាប់ផ្ទៃមាតិកាដែលអាចកែសម្រួលបាន (អក្សរ ផ្ទៃខាងក្រោយ ស៊ុម)
--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
});