How to build a CMS with React and TinyMCE

Instability, monolithic code bases, and slow rendering – these are all big problems for websites trying to serve content. But, if you build websites with React, you're taking steps to avoid these potential problems. For Content Management Systems (CMS), it's speed of content delivery that's important, and React's modular design helps to deliver the speed that’s needed.

Undoubtedly, React CMS websites work well, due to their speed. But getting modular design going can be a challenge. What helps, is an easy to configure component (with extra useful features) that’s designed to support content building.

Ideally, the component should be able to stand in for React content editable components. What component does that? TinyMCE. 

In this article, you'll find a guide on using the TinyMCE CMS rich text editor to create a React CMS. TinyMCE has reliable support for React, and as a result, works well as a React CMS rich text editor. You’ll learn, step-by-step, how to create a basic CMS using React and TinyMCE's dedicated React integration.

Why choose React for CMS development?

The key reason for choosing React as the basis for CMS development is its stability. React CMSs provide stability when multiple fields and components appear on the screen at once. The reusable, modular structure of React also lends itself well to a React CMS where components can be switched in and out, or used to quickly build new content building interfaces.

Benefits of React-based CMS

Consider the other benefits of a setting up a React CMS:

1. React scales well

One of the features React is known for is its ability to scale and still provide solid performance. This makes a React CMS base ideal for building your CMS

2. Modular components

React's modular structure makes it easier to change and improve the code base. Isolated and reusable components make for a consistent app building process across time.

3. React supports a content first approach

The concept of content coming first is a major part of the Headless CMS, and a React CMS is best suited to provide a Headless CMS structure. This kind of CMS separates the front end design of the CMS from the content building. Articles and other content can be easily picked up and adjusted to fit different interfaces.

Getting started with React CMS development

There are a few prerequisites needed to get started when setting up a React CMS:

1. A package manager, such as Yarn or NPM set up with node.js
2. Command line access through the Terminal or other shell such as Bash
3. Experience with JavaScript
4. A text editor like VS Code or Sublime Text for editing the React CMS files once the demo is built

Setting up your React framework

1. In your development environment, run the create-react-app command to start the new project:

npx create-react-app react-cms-version

2. Change into the new project:

cd react-cms-version

NOTE: At this stage, you can now test run the app with the npm start command if needed. You can switch the demo off with the Ctrl+C key combination.

3. Change into the public/ folder, and open the index.html file in your text editor

4. Add a link to the head section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"></link>

5. Save the changes

React CMS component configuration

Now that the React CMS demo is now ready, it's time to start demonstrating the modular design of a React CMS.

1. Change into the src/ directory

cd src

2. Create a components/ folder and change into it

mkdir components

cd components

3. Make the following JavaScript files: Navbar.js, TinyMCE.js, and Footer.js

touch Navbar.js Footer.js TinyMCE.js

4. Open the Navbar.js file, and include the following:

import React from "react";

const Navbar = () => {
  return (
    <nav className="navbar navbar-light bg-light">
           
      <a href="/" className="navbar-brand">
        CMS Content Builder
      </a>
             
      <button className="btn btn-outline-success my-2 my-sm-0" type="submit">
        Submit
      </button>
         
    </nav>
  );
};

export default Navbar;

5. Save the change

6. Open the Footer.js, and add the following JavaScript:

import React from "react";
import "../App.css";

const Footer = () => {
  return (
    <footer className="page-footer font-small bg-blue pt-4">
      <div className="container text-center text-md-left">
        <div className="row">
          <div className="col-md-6 mt-md-0 mt-3">
            <h5 className="text-uppercase font-weight-bold">Contact Support</h5>
            <p>
              You can contact{" "}
              <a href="https://www.tiny.cloud/contact/">TinyMCE</a> for more on
              including TinyMCE in your React CMS
            </p>
          </div>
          <div className="col-md-6 mb-md-0 mb-3">
            <h5 className="text-uppercase font-weight-bold">Smashing Stores</h5>
            <p>
              Demo based on the efforts of{" "}
              <a href="https://www.smashingmagazine.com/author/blessing-krofegha/">
                Blessing Krofegha for Smashing Magazine
              </a>
            </p>
            <p>
              Built with 💕 by{" "}
              <a href="https://twitter.com/beveloper">beveloper</a>
            </p>
          </div>
        </div>
      </div>
      <div className="footer-copyright text-center py-3">© 2023</div>
    </footer>
  );
};
export default Footer;

7. Save the changes

8. Change back into the src/ directory, and add the following to the style.css design file:

footer {
  position: absolute;
  bottom: -55px;
  width: 100%;
  background-color: #333;
  color:#fff;
}

9. Save the change

Integrating TinyMCE with React

The essential React CMS components are now ready, except for TinyMCE, which can be configured with the dedicated TinyMCE React integration:

1. Use package manager to get TinyMCE for the React CMS:

npm install --save @tinymce/tinymce-react

2. Change back into the components directory, and add the following to the TinyMCE.js file:

import React from "react";

import { Editor } from "@tinymce/tinymce-react";

const TinyMCE = () => {
  return (
    <>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">
            Title
          </span>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="Content Title"
          aria-label="Username"
          aria-describedby="basic-addon1"
        ></input>
      </div>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Content</span>
        </div>
      </div>
      <Editor
        apiKey="no-api-key"
        initialValue="<p class='tiny-editable'>Start building content here</p>"
        init={{
          height: 620,
          menubar: false,
          plugins:
            "a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount",
          toolbar:
            "undo redo | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate",
          content_css:
            "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css",
          content_style:
            ':root { --bs-primary-rgb: 62, 92, 210; --bs-border-radius: 0; --bs-border-radius-lg: 0; } html { font-size: 16px; } .tiny-logo { position: absolute; top: 2rem; left: 2rem; } h1 { font-size: 2.75rem; } h1, h2, h3 { margin-bottom: .5em; } ul.fancy li { margin-bottom: .5em; } ul.fancy li::marker { content: ; } .tiny-hero { background-image: url(images/sbc-cms-template-cover.png); background-size: cover; background-position: center center; } @media screen and (min-width: 768px) { .register-form { margin-bottom: -200px; } } form { pointer-events: none; } .tiny-editable { position: relative; } .tiny-editable:hover:not(:focus), .tiny-editable:focus { outline: 3px solid #b4d7ff; outline-offset: 4px; } .tiny-editable:empty::before, .tiny-editable:has(> br[data-mce-bogus]:first-child)::before { content: "Write here..."; position: absolute; top: 0; left: 0; color: #999; }',
        }}
      />
    </>
  );
};
export default TinyMCE;

3. 
   Change the 'no-api-key' string to your TinyMCE API key. Sign up for a FREE TinyMCE API key to get a 14-day free trial of TinyMCE's Premium plugins, and to remove any domain name warnings from the text area.

4. Save the changes

5. Change back into the src directory, and set up the App.js file with the following:

import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

import './App.css';

import Navbar from './components/Navbar';
import Footer from './components/Footer';

export default function App() {
  return (
    <div className="App">
      <Navbar>
      <Editor>
      <Footer/>
    </div>
  );
}
export default App;

6. Save the change

7. Test out the new React CMS demo using the npm start command:

Advanced React CMS features

With the essentials for the React CMS set up, the following sections explain how to configure TinyMCE's features for optimal and more productive React CMS design.

1. Configuring Advanced Templates (Premium) plugin

Templates are vital for content building. With TinyMCE's Advanced Template (Premium) plugin, you can set up static templates, or connect the plugin to your database, and allow content builders to create and edit their own templates. Here's how to set up a static template:

1. in the TinyMCE.js file, navigate to the init section, and include the advtemplate_templates option:

advtemplate_templates:

2. Include the following static template:

          advtemplate_templates: [
            {
              title: "About us",
              content:
                '<h2>About our company</h2>\n<p><a href="https://tiny.cloud">XYZ Inc.</a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest technology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients.</p>',
            },
          ],

3. Save the change, and then test out the plugin

2. Configuring non-editable sections

You can configure TinyMCE's editable_root to set up non-editable regions of content in your CMS. This gives content builders the ability to lock down parts of their content to prevent editing:

1. Include the editable_root option to the TinyMCE init content:

editable_root: false,

2. Add the editable_class option to set up content as editable or not:

editable_class: 'tiny-editable',

3. Test out the editable content by modifying the initial content React prop, including the editable class:

initialValue="<p class="tiny-editable">Start building content here</p>"

4. Save the change, and then try out the editable and non-editable content:

3. Use Accessibility Checker (Premium) plugin for compliant content

The TinyMCE Accessibility Checker (Premium) plugin automatically reports any accessibility issues in the content that’s been built. 

1. Add the a11ychecker_level option to the TinyMCE init content in the React CMS app. Using the aaa setting configures the Accessibility Checker report to check for advanced accessibility issues:

a11ychecker_level: 'aaa',

2. Save the changes, and then confirm the Accessibility checker is running by using the Accessibility Checker toolbar button:

React best supports your CMS

A modular design helps make a React CMS easier to manage. As demonstrated in the previous sections, the essential content building page for the React CMS has a Navbar, a text entry area, and a footer, which can be referenced and reused throughout the React CMS. This makes it easier to swap out components or add new TinyMCE plugins for enhanced productivity.

If you have any questions on setting up your content building project with React and TinyMCE, contact us, and the TinyMCE Sales team can best support you in finding the best combination of TinyMCE plugins to support you.