Kiritiş · compound
Boy matn tahrirlagiçi
Izoh, tavsif, maqola yoziş uçun kiçik tahrirlagiç: vositalar paneli (qalin, qiya, tagiga çiziq, röyxatlar, sarlavha, havola) va contenteditable maydon. Tugma holati aria-pressed bilan, joylaştirilgan matn oddiy matnga aylanadi, HTML hodisa va yaşirin maydon orqali olinadi. Kiçik — native execCommand; murakkab hujjat tahrirlagiçi (jadval, rasm, hamkorlik) uçun taşqi kutubxona ulanadi.
Mijoz şartnomani payşanbagaça imzolaşini aytdi.
Anatomiya
- root
.fx-richtextşart - bar
.fx-richtext__barşart - body
.fx-richtext__bodyşart - foot
.fx-richtext__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Panel tugmalari orasida (data-fx-toolbar) |
| Ctrl+B, Ctrl+I, Ctrl+U | Qalin, qiya, tagiga çiziq |
| Tab | Panel → maydon |
Maydon role="textbox" aria-multiline, aria-label şart. Panel — role="toolbar" (`data-fx-toolbar` bilan ← → yuriş). Tugmalar aria-pressed (faol: fon + brend matn rangi), fokus tugmani bosganda maydonda qoladi. Ctrl+B / Ctrl+I brauzerning özida işlaydi.
Naqş: WAI-ARIA APG toolbar · rol textbox
Kod
AI uçun: qaçon işlatiladi
- Formatlangan matn: izoh, tavsif, xat, maqola qoralamasi.
- Oddiy köp qatorli matn →
input - AI çat kiritmasi →
composer - Foydalanuvçi HTML'ini tozalamay serverga saqlamang — qabul qilgan tomonda ruxsat etilgan teglarni (b, i, u, h2, ul, ol, li, a, p) qoldirib, qolganini olib taşlang.
- Ikonlarni ketma-ket takrorlab inline SVG qilmang — matnli belgi yoki bitta `<symbol>`.
- Oddiy bir qatorli izoh uçun işlatmang — `textarea` yetadi.
npx foxui add richtext
<div class="fx-richtext" data-fx-richtext>
<div class="fx-toolbar fx-richtext__bar" data-variant="flat" role="toolbar" aria-label="Matn formati" data-fx-toolbar>
<div class="fx-toolbar__group"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="bold" aria-pressed="false" aria-label="Qalin">B</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="italic" aria-pressed="false" aria-label="Qiya">I</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="underline" aria-pressed="false" aria-label="Tagiga çiziq">U</button></div>
<span class="fx-toolbar__sep" role="separator"></span>
<div class="fx-toolbar__group"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="formatBlock" aria-pressed="false" aria-label="Sarlavha" data-value="h2">H2</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="insertUnorderedList" aria-pressed="false" aria-label="Belgili röyxat">•</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="insertOrderedList" aria-pressed="false" aria-label="Raqamli röyxat">1.</button></div>
<span class="fx-toolbar__sep" role="separator"></span>
<div class="fx-toolbar__group"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-cmd="link" aria-pressed="false" aria-label="Havola">Havola</button></div>
</div>
<div class="fx-richtext__body" data-placeholder="Mijoz haqida izoh yozing…"><p>Mijoz <b>şartnomani</b> payşanbagaça imzolaşini aytdi.</p></div>
<input type="hidden" name="izoh">
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-field --fx-bg-subtle --fx-border-color-default --fx-border-color-field --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-xs --fx-font-weight-semibold --fx-radius-surface --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-tertiary