Ecme - The Ultimate Next & TypeScript Web Template

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 را مشاهده کنید.

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