RHFRichTextEditor

RHFRichTextEditor wraps CKEditor 5 (ClassicEditor) and binds it to React Hook Form. It allows users to format text with features such as bold, italics, lists, links, images, and more, making it suitable for blog posts, comments, or any content requiring rich formatting. CKEditor 5 is highly customizable and supports advanced features such as codeBlocks, findAndReplace, tables, and more.

Installation

npm install ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

yarn add ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

pnpm add ckeditor5@43.0.0 @ckeditor/ckeditor5-react@9.0.0

Usage

import RHFRichTextEditor, { RHFRichTextEditorProps, DefaultEditorConfig } from '@nish1896/rhf-mui-components/misc/rich-text-editor';

The stored value is an HTML string.

import { useForm } from 'react-hook-form';

type FormValues = {
  bio: string;
};

const { control, handleSubmit } = useForm<FormValues>({
  defaultValues: { bio: '' }
});

<form onSubmit={handleSubmit(values => console.log(values.bio))}>
  <RHFRichTextEditor
    fieldName="bio"
    control={control}
  />
</form>

Validation

Rules go in registerOptions. Because the value is HTML, an empty editor can still hold markup such as <p></p>, and runs of spaces are stored as  . Strip the tags and convert   to spaces before checking the length:

const stripHtml = (html: string) => html
  .replace(/<[^>]*>/g, '')
  .replace(/&nbsp;/g, ' ')
  .trim();

<RHFRichTextEditor
  fieldName="bio"
  control={control}
  registerOptions={{
    validate: value =>
      stripHtml(value).length >= 20 || 'Write at least 20 characters'
  }}
/>

Handling value changes

onValueChange runs after the new HTML has been stored in the form. It receives { newValue, event, editor }: the new HTML string, the CKEditor event, and the editor instance. onReady, onFocus, onBlur and onError are forwarded from CKEditor.

<RHFRichTextEditor
  fieldName="bio"
  control={control}
  onValueChange={({ newValue, event, editor }) => {
    console.log(newValue.length, editor.getData());
  }}
/>

Use customOnChange when you need to change what gets stored. It replaces the default handling, so you must call rhfOnChange yourself with the HTML to store. It receives { rhfOnChange, newValue, event, editor }. This example stores an empty string instead of an empty paragraph. onValueChange is not called when customOnChange is used.

<RHFRichTextEditor
  fieldName="bio"
  control={control}
  customOnChange={({ rhfOnChange, newValue, event, editor }) => {
    rhfOnChange(newValue === '<p></p>' ? '' : newValue);
  }}
/>

Customizing the editor

To reorder formatting options or add advanced features, you can provide a custom configuration via the editorConfig prop, or override the existing configuration by modifying the DefaultEditorConfig object. You can check the default configuration here.

To customize the editor theme, review 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.

Labels, errors and disabling

showLabelAboveFormField, hideLabel, formLabelProps, helperText, renderError, hideErrorMessage and disabled (or a form-level disabled in useForm) work as described in RHFTextField.

With Latest Version

The latest version of CKEditor5 requires a paid license key. To continue accessing the newest features of the editor while preserving the underlying form logic, update your code as follows:

1. Obtain a License Key: Acquire a commercial license key from the CKEditor Pricing Page.

2. Update Your CKEditor 5 Configuration: Incorporate the licenseKey into your editor configuration:

import RHFRichTextEditor, { DefaultEditorConfig } from '@nish1896/rhf-mui-components/misc/rich-text-editor';

<RHFRichTextEditor
  fieldName="bio"
  control={control}
  editorConfig={{
    licenseKey: 'YOUR_LICENSE_KEY',
    ...DefaultEditorConfig,
  }}
/>

Replace 'YOUR_LICENSE_KEY' with the license key you obtained. You can also configure your own editor settings instead of using the default configuration.

Examples

• CKEditor5
• RHFRichTextEditor

Alternatives

I chose CKEditor for its advanced features, customization options, and support for multiple languages. Although the documentation can be extensive, this component provides both basic and advanced configuration options. If you're looking for a simpler solution, consider implementing mui-rte.

Quill and TipTap are excellent alternatives. They offer a wide range of rich text editor features along with well-documented examples and guides.

API

RHFRichTextEditorProps accepts the following props. Props marked with * are required.

Source Code

View the full implementation of this component on GitHub.