Rich Text Editorv1.1.0
ویرایشگر متن قالب‌دار برای ایمیل، یادداشت و توضیحات طولانی. نوار ابزارِ ساده درشت، کج، زیرخط و فهرست دارد و نوارِ کامل (پراپ toolbar با مقدار full) برگرداندن، سبک پاراگراف، خط‌خورده، رنگ و هایلایت، چینش، فهرست شماره‌دار، تورفتگی و لینک را هم اضافه می‌کند؛ وضعیت هر دکمه با انتخاب فعلی هم‌گام است. جهت هر پاراگراف خودکار است تا متن فارسی و انگلیسی کنار هم درست بنشیند. بدون وابستگی بیرونی ساخته شده.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/rich-text-editor.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/rich-text-editor.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/rich-text-editor.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/rich-text-editor.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { RichTextEditor, textToHTML } from "@/components/ui/rich-text-editor"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ناحیهٔ نوشتن یک contentEditable با role="textbox" است و نوار ابزار یک Toolbar از Toggleها؛ پس ناوبری فلشی و حالت فشرده‌بودن دکمه‌ها همان رفتار بقیهٔ دیگ را دارد.
محتوا کنترل‌نشده است: defaultValue فقط بار اول نوشته می‌شود و هر تغییر با onValueChange به‌صورت HTML برمی‌گردد. برای کنترل بیرونی، ref سه متد می‌دهد: insertText (درج در محل مکان‌نما)، setHTML (جایگزینی کل متن) و focus. textToHTML متن ساده را به پاراگراف تبدیل می‌کند.
دسترس‌پذیری
- ناحیهٔ نوشتن role=textbox و aria-multiline دارد و با aria-label یا aria-labelledby نام می‌گیرد.
- هر دکمهٔ نوار ابزار برچسب فارسی با میان‌بر صفحه‌کلید دارد و حالت فشرده (aria-pressed) را با انتخاب فعلی اعلام می‌کند.
- کلیک روی نوار ابزار فوکوس و انتخاب متن را از ویرایشگر نمی‌گیرد.
- خروجی HTML است؛ پیش از ذخیره یا نمایش برای دیگران، سمت سرور پاک‌سازی کنید.
مرجع API
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| defaultValue | string | — | محتوای اولیه به‌صورت HTML. |
| onValueChange | (html: string) => void | — | با هر تغییر، HTML فعلی. |
| placeholder | string | — | متن راهنما وقتی ویرایشگر خالی است. |
| minRows | number | 6 | کمینهٔ ارتفاع ناحیهٔ نوشتن به تعداد خط. |
| toolbar | "basic" | "full" | "basic" | basic فقط درشت، کج، زیرخط و فهرست؛ full نوار کامل سند. |
| toolbarEnd | React.ReactNode | — | محتوای اضافه در انتهای نوار ابزار، مثل دکمهٔ پیوست. |
| disabled | boolean | false | غیرفعال کردن نوشتن و نوار ابزار. |
| ref | Ref<RichTextEditorHandle> | — | متدهای focus، insertText(text) و setHTML(html). |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
نوار ابزار کامل
رنگ و هایلایت با متغیرهای توکن (var(--color-…)) ذخیره می‌شوند تا متن رنگی در تم تیره هم خوانا بماند. نوار در عرض کم به چند ردیف می‌شکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
درج متغیر در محل مکان‌نما
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خروجی HTML
با هر تایپ یا قالب‌بندی، onValueChange همان HTMLی را می‌دهد که باید ذخیره شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| نوار ابزار کامل | مقاله، صفحهٔ راهنما یا توضیح محصول که عنوان، رنگ، چینش و لینک لازم دارد |
| درج متغیر در محل مکان‌نما | قالب پیامک و ایمیل |
| خروجی HTML | با هر تایپ یا قالب‌بندی، onValueChange همان HTMLی را می‌دهد که باید ذخیره شود. |