RHFRichTextEditor
RHFRichTextEditor
is a powerful and flexible rich text editor designed for
content creation within forms. It allows users to format text with features
like bold, italics, lists, links, images,
and more, making it suitable for blog posts, comments, or any content
requiring rich formatting. This component is built on top of CkEditor,,
a highly customizable editor that supports advanced features like
codeBlocks
, findAndReplace
, tables
, and more.
npm i ckeditor5 @ckeditor/ckeditor5-react
yarn add ckeditor5 @ckeditor/ckeditor5-react
Usage
import { RHFRichTextEditor, RHFRichTextEditorProps } from '@nish1896/rhf-mui-components';
<RHFRichTextEditor
fieldName='bio'
value={getValues('bio')}
setValue={setValue}
/>
To reorder formatting options or add advanced features, you can provide
a custom configuration via the editorConfig
prop. You can check the
default configuration here.
To customize editor theme, check the theme customization guide.
For advanced features like findAndReplace, inserting images, markdown support, and word count, refer to this example. For a full list of available CKEditor features, visit the CKEditor documentation.
Examples
Alternatives
I chose CKEditor for its advanced features, customization options and support for multiple languages. Although the documentation can be overwhelming, I've provided both basic and advanced configuration options for this component. If you're looking for a simpler solution, you can consider implementing mui-rte
API
RHFRichTextEditorProps
accepts the following props:
Name | Type | Required | Description |
---|---|---|---|
fieldName | string | ✅ | React Hook Form requires name as a key for the registration process. |
setValue | (name: string, value: unknown, config?: Object) => void | ✅ | The setValue option yielded on calling the useForm hook. |
editorConfig | EditorConfig | A Configuration object for CkEditor to customize formatting controls and toolbar positioning, as per requirement. Refer to the toolbar positioning guide for more details. | |
value | string | The content to render in the Rich Text Editor. It can be a plain text string or an HTML string. | |
onValueChange | (event: EventInfo, newValue: string, editor: ClassicEditor) => void | Callback function returning the event object, editor value and editor details. | |
disabled | boolean | A boolean value to enable or disable editing of the form field. | |
label | ReactNode | The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name". | |
formLabelProps | FormLabelProps | FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component. | |
helperText | ReactNode | Optional helperText to render under RHFSelect or RHFNativeSelect field. | |
errorMessage | ReactNode | Error message to be shown for a field in FormHelperText component. | |
hideErrorMessage | boolean | Prevent replacing of form HelperText by error message during validation trigger. | |
formHelperTextProps | FormHelperTextProps | FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component. |