Exploring the JSON Rich Text Editor

Contentstack’s Rich Text Editor offers a powerful, customizable interface for content editors, backed by robust developer features that allow complete control over the HTML output.

Key Features for Content Editors

• Rich media embedding (images, videos, tables)

• Integration with external systems (e.g., Cloudinary)

• AI-assisted content enhancements

• Embedding and linking other content entries

Configuring the Rich Text Field

Basic Configuration

• Inline formatting: Bold, Italic, Underline

• Block formatting: Headers, Paragraphs

Advanced Configuration

• Includes rich media, tables, and embeds

Custom Configuration

• Selectively enable or disable features

• Useful for restricting options for SEO or accessibility purposes (e.g., avoiding multiple H1 tags)

Embedding and External References

• Entries: Embed full entries directly within Rich Text.

• Assets: Embed images or videos directly, either from internal assets or external systems like Cloudinary.

Customizing HTML Output

The Rich Text Editor outputs structured JSON, which developers can convert into customized HTML using the Contentstack Delivery SDK utility functions.

JSON Structure

• Rich Text content is stored as JSON with clear semantic descriptions.

• Example JSON snippet:

{
 "type": "paragraph",
 "children": [
 { "text": "Rich", "italic": true },
 { "text": " text editor", "bold": true }
 ]
}

Converting JSON to HTML

Use the built-in utility function:

import { jsonToHtml } from '@contentstack/utils';
const htmlOutput = jsonToHtml(entry.content);

Customizing Rendered HTML

Customize the output further with render options:

const renderOptions = {
 p: (node, next) => (node.children[0].text.trim() === '' ? '' : `<p>${next(node.children)}</p>`),
 a: (node, next) => `<a href="${node.attrs.href}" rel="noopener nofollow">${next(node.children)}</a>`
};
const htmlOutput = jsonToHtml(entry.content, renderOptions);

Example Use Cases

• Remove empty paragraphs to keep markup clean.

• Add SEO-friendly attributes to links automatically.

• Customize image rendering for optimal performance (lazy loading, image optimization).

Handling Embedded Entries and Assets

Embedded Entries

When referencing another entry:

const renderOptions = {
 embedded_entry: (node) => `<div class="embedded-entry">${node.entry.title}</div>`
};

Cloudinary Assets

Customize Cloudinary images dynamically:

const renderOptions = {
 cloudinary: (node) => `<img src="${node.attrs.secure_url}" alt="${node.attrs.alt}" loading="lazy">`
};

Advanced Image Customization

Add dynamic parameters to Cloudinary images:

function customCloudinaryImage(asset, metadata) {
 const params = 'w_800,h_450,f_auto,q_90,c_fill';
 return `<img src="${asset.url}?${params}" alt="${asset.alt}" loading="lazy">`;
}

Best Practices

• Clearly separate editorial content input from HTML rendering.

• Allow content editors freedom within the Rich Text editor, and handle all necessary cleanup in the rendering logic.

• Use JSON rendering hooks to avoid manual HTML adjustments by editors.

Resources

• Contentstack Documentation

• Discord Community