Create New JSON RTE Plugin

In this guide, we will learn how to develop a new JSON Rich Text Editor plugin from the ground up.

Prerequisites

  • Node.js version 8 or above

Building Your JSON RTE Plugin

Here is an overview of the steps involved in building a customized JSON RTE Plugin and adding it to your stack:

  1. Clone Boilerplate GitHub Repository
  2. Install Dependencies
  3. Add Custom Visuals for the JSON RTE Plugin
  4. Test the JSON RTE Plugin
  5. Build the JSON RTE Plugin
  6. Host the Custom JSON RTE Plugin
  7. Add JSON RTE Plugin to a Stack
  8. Use Custom JSON RTE Plugin in Content Types
  1. Clone Boilerplate GitHub Repository

    Create a clone of the boilerplate GitHub repository that contains the template needed to create a JSON RTE plugin using the Contentstack app SDK. In the cloned boilerplate repository, you’ll find the src/plugin.tsx file that contains the setup code for initializing the JSON RTE plugin.

    Here’s how the code within the plugin.tsx file looks:

    /** @jsx jsx */
    import { jsx } from "@emotion/core";
    import ContentstackSDK from "@contentstack/app-sdk";
    
    export default ContentstackSDK.init().then(async (sdk) => {
        const extensionObj = await sdk["location"];
        const RTE = await extensionObj["RTEPlugin"];
    
        return {};
    });
    
  2. Install Dependencies

    Run the following command to install the dependencies:

    npm install
  3. Add Custom Visuals for the JSON RTE Plugin

    Once you have cloned the GitHub repository, you can add the visual part of your plugin (the tile, icon style, display, and element type) to the template code inside the plugin.tsx file. These parameters can vary for various plugins.

    The Highlight plugin source code is as follows:

    import React from 'react'
    import { Icon } from '@contentstack/venus-components'
    import ContentstackSDK from "@contentstack/app-sdk";
    
    export default ContentstackSDK.init().then(async (sdk) => {
        const extensionObj = await sdk["location"];
        const RTE = await extensionObj["RTEPlugin"];
        if(!RTE) return ;
    
        const Highlight = RTE('highlight', () => ({
            title: 'Highlight',
            icon: <Icon style={{padding: '0 6px'}} icon="Edit" size="original" />,
            render: (props:any) => {
                return <span style={{background: 'rgba(251, 243, 219, 1)'}}>{props.children}</span>
            },
            display: ['toolbar'],
            elementType: ['text']
        }));
    
        return {
            Highlight
        };
    });
    
  4. Test the JSON RTE Plugin

    To test your JSON RTE plugin, run the following command:

    npm start

    Now, your plugin is up and running on the localhost at http://localhost:1268/plugin.system.js. You can use it to test your plugin.

  5. Build the JSON RTE Plugin

    Once your custom plugin code is ready, you can build the JSON RTE plugin using the following command:

    npm run build

    Execution of this command generates a dist folder in your working directory.

  6. Host the Custom JSON RTE Plugin

    There are two ways to host your custom JSON RTE plugin code:

    • Host Externally: This method is suitable if you do not want to host the custom JSON RTE plugin code on Contentstack but an external server. In this case, you can host the dist/plugin.system.js file on any static file server. You can use this hosted file URL for your JSON RTE plugin.
    • Host on Contentstack: Through this method, you can host your custom JSON RTE plugin code on Contentstack. To do this, you need to upload the dist/plugin.system.js file to Contentstack’s Assets repository. Now, you can use the file URL for your JSON RTE plugin.Highlight_plugin_in_assets.png
  7. Add JSON RTE Plugin to a Stack

    To add the custom JSON RTE Plugin extension, log in to your Contentstack account, and perform the following steps:

    1. Go to your stack, click the “Settings” icon on the left navigation panel, and select Extensions.
    2. On the Extensions page, click on the + New Extension button at the top-right corner of the page, and select Create New. If you have not added any extensions in the stack, click on the + New Extension link as shown below.
    3. Create_New.png
    4. In the Select Extension Type window, select JSON RTE Plugin.
    5. JSON_RTE_Plugins_card.png
    6. On the resulting page, enter values in the fields as given below:
      • Title (required): You will see a predefined title. You can use this title when adding the JSON RTE plugin to your content type.
      • External Hosting URL (required): Specify the URL of your externally-hosted JSON RTE plugin code or the file URL if you are hosting through Contentstack.

        Note: The external hosting URL should be an HTTPS or a localhost URL.

      • Config Parameters (optional): If you have used any config parameters in the source code, provide the value for the parameters here.
        Config_Box.png

        Note: The maximum size of the JSON RTE plugin configuration cannot exceed 10 KB.

        The settings provided in this field will act as the default configuration settings for all the instances of the JSON RTE plugin within the stack.

    7. Save your custom JSON RTE plugin.
  8. Use Custom JSON RTE Plugins in Content Types

    Once you have added a custom JSON RTE plugin, you can use it in your content type’s JSON Rich Text Editor field(s). To add a custom JSON RTE plugin in your content type, follow the steps mentioned in the Use JSON RTE Plugins in Content Types article.

    Note: You can add a maximum of five plugins to a single JSON RTE field in a content type.

    API Reference

    To retrieve, add or update JSON RTE plugins within your stack via API request, refer to the JSON RTE Plugins collection or the following API requests in our CMA API documentation:

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^