محرّر النصوص الغني

محرر نصوص كامل المزايا مع شريط أدوات التنسيق. يدعم الأوضاع الافتراضي والإدخال والنص المحدَّد والتخطيط القابل للتوسيع والجوّال.

Loading demo: rich-text-editor-real-world

التثبيت

npx sdaia-ui@latest add rich-text-editor

import { RichTextEditor } from "@/components/ui/rich-text-editor"

<RichTextEditor type="default" />

محرر نصوص منسَّقة مع شريط أدوات التنسيق الكامل.

Loading demo: rich-text-editor-default

محرر نصوص منسَّقة في وضع الإدخال للتحرير المضمَّن.

Loading demo: rich-text-editor-input

المحرر مع نص محدَّد يُظهر خيارات التنسيق المضمَّنة.

Loading demo: rich-text-editor-text-selected

محرر نصوص منسَّقة مهيَّأ لشاشات الجوّال.

Loading demo: rich-text-editor-mobile

خصائص مكوّن RichTextEditor.

Prop	Type	Default	Required
type	'default' \| 'text-selected' \| 'input'	'default'	optional
mobile	boolean	false	optional
expand	boolean	false	optional
isBold	boolean	false	optional
isItalic	boolean	false	optional
isUnderline	boolean	false	optional
alignment	'left' \| 'center' \| 'right'	-	optional
textStyle	string	-	optional
textStyleOptions	string[]	-	optional
fontSize	string	-	optional
fontSizeOptions	string[]	-	optional
onTextStyleChange	(value: string) => void	-	optional
onFontSizeChange	(value: string) => void	-	optional
onUndo	() => void	-	optional
onRedo	() => void	-	optional
onBold	() => void	-	optional
onItalic	() => void	-	optional
onUnderline	() => void	-	optional
onAlign	(alignment: TextAlignment) => void	-	optional
onColor	() => void	-	optional
onLink	() => void	-	optional
onImage	() => void	-	optional
onAI	() => void	-	optional
value	string	-	optional
placeholder	string	'You can write here…'	optional
onChange	(value: string) => void	-	optional
onAddContent	() => void	-	optional
onFormatText	() => void	-	optional
onEmoji	() => void	-	optional
onMention	() => void	-	optional