Render Rich Text Editor

Render with Required Props

To render the RichTextEditor component with only the required props, follow the code snippet below:

// import RichTextEditor component & useRichTextEditor hook
 
export default function Demo() {
 
  const {output, fetchOutput} = useRichTextEditor()
 
    return (
 
        <RichTextEditor
 
            toolbarOptions={['word_count', 'clear_format', 'undo', 'redo', 'font', 'header', 'bold', 'italic', 'underline', 'strikethrough', 'text_color', 'highlight_color', 'numbered_list', 'bulleted_list', 'align', 'decrease_indent', 'increase_indent', 'direction', 'blockquote', 'code_block', 'link', 'image_base64', 'embed_video', 'format_media', 'sub_script', 'super_script']}
 
            customizeUI={{
                backgroundColor: '#fcfcfc',
                primaryColor: '#20464b',
            }}
 
            fetchOutput={fetchOutput}
        />
 
    )
}

fetchOutput

In line 5, the "useRichTextEditor" hook is invoked, and the output and fetchOutput are destructured from it. The fetchOutput is subsequently passed as a prop to the RichTextEditor component. This component generates HTML, which is stored in the "output" variable.

toolbarOptions

The toolbarOptions prop allows you to customize the visibility of various toolbar options. You can customize the toolbar to meet your requirements by including or excluding specific options. Below is a list of available options that you can specify:

'word_count',
'clear_format',
'undo',
'redo',
'font',
'header',
'bold',
'italic',
'underline',
'strikethrough',
'text_color',
'highlight_color',
'numbered_list',
'bulleted_list',
'align',
'decrease_indent',
'increase_indent',
'direction',
'blockquote',
'code_block',
'link',
'image_base64',
'image_cloud'
'embed_video',
'format_media',
'sub_script',
'super_script'

Note: You must choose either image_base64 or image_cloud. The choice between image_base64 and image_cloud depends on your image handling preferences.

• Use image_base64 if you prefer to handle images as base64 strings.

• Opt for image_cloud if you intend to upload images to a cloud platform like Cloudinary, which will provide a URL for the uploaded image. Please note that utilizing a cloud platform requires additional setup. You can find detailed setup guidance here.

customizeUI

The customizeUI prop allows you to customize the user interface of the toolbar and editor. Detailed information about this prop can be found on the UI Customization page.