Installation

The Framer CMS Rich Text Editor is a powerful content editing tool built to seamlessly integrate with your Framer projects. It allows you to create and manage rich, formatted content directly within the CMS, making your content dynamic and easy to update without touching code.

This guide walks you through the basics of setting up and using the Rich Text Editor in your Framer CMS-powered site.

What is the Rich Text Editor?

The Rich Text Editor (RTE) is a WYSIWYG content field that supports text formatting, links, images, lists, and embedded media. It offers your content creators a flexible interface to add rich content without needing technical skills.

Under the hood, the editor stores content as structured JSON, which the Framer site renders into HTML dynamically.

Setting Up the Rich Text Editor Field in CMS

To use the Rich Text Editor in your project’s CMS:

Step 1: Define the Rich Text Field in Your Collection

When creating or editing a CMS Collection, add a new field and select the Rich Text type.

jsCopierModifier// Example: Defining a collection with a rich text field using a fictional CMS API

const Articles = cms.createCollection("Articles", {
  title: "string",
  body: "richText", // This field will hold your rich formatted content
  publishedDate: "date",
});

Step 2: Populate Content with the Editor

In the CMS admin panel, the body field will provide a rich text editor interface. Authors can add headings, paragraphs, links, lists, and media using toolbar controls.

Rendering Rich Text Content in Framer

The Rich Text Editor stores content as structured JSON, which needs to be rendered properly on your site.

Step 1: Fetch CMS Content

Fetch the content from your CMS, typically as part of the data fetching lifecycle.

jsCopierModifierconst article = await cms.get("Articles", articleId);
const richTextContent = article.body; // This is JSON representing rich text

Step 2: Render Using the Rich Text Renderer

Use the Rich Text Renderer component or utility provided by Framer to parse the JSON and display it as HTML.

jsxCopierModifierimport { RichTextRenderer } from "framer-cms";

export function ArticleBody({ content }) {
  return (
    <RichTextRenderer content={content} />
  );
}

The renderer handles converting JSON nodes into proper HTML elements with formatting.

Customizing the Rich Text Editor

You can tailor the Rich Text Editor to fit your brand’s style and content needs.

Enabling or Disabling Formatting Options

Control which formatting tools appear in the editor toolbar:

jsCopierModifierconst editorConfig = {
  toolbarOptions: [
    "bold",
    "italic",
    "underline",
    "link",
    "image",
    "list",
    // Remove or add options as needed
  ]
};

Styling Rendered Content

Customize the CSS for rich text output to match your site’s design system.

cssCopierModifier.rich-text p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.rich-text h2 {
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.rich-text a {
  color: #1a73e8;
  text-decoration: none;
}

.rich-text a:hover {
  text-decoration: underline;
}

Advanced Usage

Embedding Custom Components

Extend the editor to support embedding custom interactive components, such as videos, charts, or callouts.

jsCopierModifierconst editorExtensions = {
  customBlocks: {
    video: ({ url }) => <VideoPlayer src={url} />,
    chart: ({ data }) => <Chart data={data} />,
  },
};

Handling Links with Tracking

Intercept links inside rich text to add custom behavior, like tracking clicks or opening in new tabs.

jsxCopierModifierfunction CustomLink({ href, children }) {
  function handleClick() {
    trackEvent("richTextLinkClick", { href });
  }

  return (
    <a href={href} onClick={handleClick} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

Troubleshooting Tips

• Content not rendering? Ensure the Rich Text Renderer component is imported and used properly.

• Formatting options missing? Check your editor configuration to confirm toolbar options are enabled.

• Custom styles not applied? Verify your CSS selectors match the rendered output structure.

• Images not displaying? Confirm image URLs are accessible and the CMS field supports media embedding.

By leveraging the Framer CMS Rich Text Editor, you empower content teams to maintain rich, formatted content with ease—while keeping your site flexible and performant. With proper setup and customization, it becomes a cornerstone of your dynamic web experience.