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

• RHFRichTextEditor
• ColorPicker

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.