Display Generated HTML

Once you've created a document using the "RichTextEditor" component and saved the output HTML in a database, the next step often involves presenting this content in a read-only mode. The DisplayTheOutput component facilitates this process.

Using the DisplayTheOutput Component

Before diving into the example, let's set the context:

Assume that you've fetched HTML content from the database and stored it in a variable named fetched_html.

Here's a basic demonstration of the DisplayTheOutput component in action:

import DisplayTheOutput from "rich-text-editor-for-react/display-output"
 
export default function Demo() {
    return (
        <DisplayTheOutput
            html={fetched_html} // the fetched html
            backgroundColor='#fcfcfc'
            primaryColor='#20464b'
        />
    )
}

Code Explanation:

• html: This required prop accepts the HTML string generated by the RichTextEditor component.

• backgroundColor & primaryColor: These required props dictate the background and primary colors for the rendered HTML respectively.

• typography : This optional prop isn't shown in the example above, but can be used to adjust the typography style of the displayed html content. It mirrors the structure & functionality of the typography property found in the customizeUI prop of the RichTextEditor component.