اجزاء
اختصار عددلینک عملکارت سازگارپیوستبررسی اختیارنمایش تقویمنمودارپنجره تاییدظرفورودی قالب سفارشیجدول دادهورودی تاخیریتصویر دو رودکمه نقطه چیننمودار گانتمقدار رشد و کاهشمتن آیکونگالری تصاویربارگذاریماسونیاستخلال رسانهتغییر ناوبریورودی عددیورودی OTPورودی رمز عبورورودی الگونقشه منطقهویرایشگر متن غنیگزینه آیتم قطعه پیشتنظیمپاورقی چسبندهبرجستهسازی دستورگروه آواتار کاربران
RichTextEditor (ویرایشگر متن غنی)
کامپوننت RichTextEditor یک ویرایشگر متن غنی قابل تنظیم است که با فریمورک Tiptap مورد استفاده قرار میگیرد. این ویرایشگر دارای یک نوار ابزار از پیش تعریفشده است که شامل گزینههای فرمتدهی معمول مانند بولد، ایتالیک، لیستها و موارد دیگر میباشد.
Basic (استفاده اساسی)
استفاده اساسی.
Custom toolbar (نوار ابزار سفارشی)
شما میتوانید نوار ابزار ویرایشگر را با پراپ
customToolBar سفارشیسازی کنید.Custom config (پیکربندی سفارشی)
شما میتوانید کل پیکربندی را با پراپ
customToolBar سفارشی کنید. توجه: اگر از StarterKit به عنوان اکستنشن استفاده نمیکنید، وجود مستندات و اکستنشن Text ضروری است.With form (با فرم)
مثالی همراه با فرم.
API
RichTextEditor (ویرایشگر متن غنی)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| content | محتوای اولیه ویرایشگر. این میتواند یک رشته HTML یا متن ساده باشد. | string | - |
| invalid | سبکهایی را اعمال میکند که نشان دهد محتوای ویرایشگر نامعتبر است، معمولاً برای اعتبارسنجی فرم استفاده میشود. | boolean | - |
| customToolBar | تابعی برای سفارشیسازی نوار ابزار با ارائه دکمههای دلخواه. این تابع نمونه جاری `editor` و یک شی شامل کامپوننتهای پیشفرض نوار ابزار را دریافت میکند. | (editor: Editor, components: {
ToolButtonBold: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonItalic: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonStrike: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonCode: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonBlockquote: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonHeading: ({ editor }: BaseToolButtonProps & { headingLevel?: HeadingLevel[] }) => JSX.Element,
ToolButtonBulletList: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonOrderedList: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonCodeBlock: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonHorizontalRule: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonParagraph: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonUndo: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonRedo: ({ editor }: BaseToolButtonProps) => JSX.Element,
}) => ReactNode | - |
| onChange | تابع بازخوانی که هر بار محتوای ویرایشگر تغییر میکند، فراخوانی میشود. این تابع محتوای بهروزرسانیشده را در سه فرمت ارائه میدهد: متن ساده، HTML و JSON. | (content: {text: string, html: string, json: JSONContent}) => void | - |
| editorContentClass | کلاسهای CSS اضافی که به ناحیه محتوای ویرایشگر اعمال میشوند. | string | - |
| customEditor | یک نمونه سفارشی از `Editor` Tiptap. اگر ارائه شود، این نمونه به جای ایجاد یک نمونه جدید استفاده خواهد شد. | Editor | null | - |
وابستگیها
tiptap
برای استفاده بیشتر از tiptap، میتوانید به مستندات رسمی مراجعه کنید تا لیست کامل API را مشاهده کنید.