Customizing the React Rich Text Editor: KendoReact Tutorial

Need a great React Rich Text Editor? The KendoReact Editor should be on your shortlist! You know it’s feature rich, but how customizable is it? Let’s find out.

Showing content to our users is only half the battle—in most situations, an application also needs to handle user input content as well.

For your more standard inputs, like Text Boxes, Range Sliders, Switches, Color Pickers and other elements you might find in a form, the KendoReact Inputs library has you covered.

However, sometimes your users need to be able to do a lot more with their content, including formatting (like bolding, coloring, changing the alignment, etc.), or embedding images, creating tables for data, using bulleted or numbered lists, linking content … basically, full-on word processing. For that, you’ll want the KendoReact Editor.

The KendoReact Rich Text Editor has a long list of awesome features (and I highly encourage you to check them out in detail in our docs)—but, in the interest of writing a blog post and not The Next Great American Novel, we’re going to focus on the features that allow you to customize the Editor.

If you’d like to hear Kathryn talk about this, check out the companion video, How Can You Customize Your React Rich Text Editor?

Defining Input Rules

Input rules allow you to modify the user’s input as they’re creating it, by matching their input with a set of rules you’ve created using regex.

For example, in our docs, we have a set of great input rules we’ve created to match Markdown syntax. This allows us to do things like convert hash characters (###) into h# headings, backticks (`) into code blocks, and dashes (-) into bullets for a bulleted list. You could also use custom input rules to do small quality-of-life improvements, like converting double dashes (--) into a proper em dash (—), or triple dots (...) into actual an ellipsis (…).

In fact, it would be totally possible to swap out any specific word for another one, creating your own custom autocorrect, which we’ll do in the example below. All that to say—the sky (or, maybe just your regex knowledge) is the limit on creating your own custom input rules!

Here, I’ve created a custom rule that looks for the string “hello” and changes it to “hi.” To do so, I made sure I had imported ProseMirror (an external engine that we used to help create the Editor), then defined inputRule, which will return any rules we write. Any custom rules you want to add to your Editor should be returned by inputRules! To create a new rule, you just use new InputRule, then open parenthesis and define the rule by setting the input you’re looking for and the input you’d like to replace it with, separated by a comma.

const inputRule = (nodes) => {
  return inputRules({
    rules: [
            new InputRule(/hello$/, 'hi'),
            new InputRule(/*define your rule here */)
        ],
  });
};

After that, we just make sure that, onMount, we load those input rules as part of our plugins list, and then return the updated EditorView. That makes sure that the React Rich Text Editor renders with our new input rules in place.

const onMount = (event) => {
  const state = event.viewProps.state;
  const plugins = [...state.plugins, inputRule(state.schema.nodes)];
  return new EditorView(
    {
      mount: event.dom,
    },
    {
      ...event.viewProps,
      state: EditorState.create({
        doc: state.doc,
        plugins,
      }),
    }
  );
};

It’s just that easy! I recommend that you don’t follow in my footsteps by replacing random words as the user is typing—rather, consider how your users normally create content and what you could do to automate their most common needs to make their lives easier. Remember that changing content automatically can be a double-edged sword—it’s useful when we’re able to predict our users’ needs correctly, but can create a frustrating user experience when we’re not. Make sure you’re implementing these rules alongside lots of user testing and validation!

Customizing Tools & Creating New Ones

Because every app is different and every userbase is different, every React WYSIWYG editor needs to be different, too. Will your users be primarily creating lists? Writing essays? Inputting code snippets? Depending on what you plan to do with the content afterward, you might not want your users to be able to change the text color or embed images.

Every component we create is made to be highly flexible because we understand that not every problem can be answered with the same solution. Ultimately you, as the developer, know what’s best for your userbase—and you should be able to customize every component you use to give your users the tailored and intuitive experience they deserve.

That means that in our React Rich Text Editor, you get to decide which tools appear in the toolbar above the WYSIWYG panel—include the ones you need, and leave out the ones you don’t. To take it even a step beyond that, you can also customize any of the tools in our existing suite, or create your own totally new tools and put them in the toolbar alongside ours if there’s something you need to allow your users to do that’s unique to your application. Add your own buttons, dropdowns, toggles—whatever you need, we’ve got you covered.

In this example, we’ve customized the existing font-size dropdown selector. And once again, I’m giving an excellent “do as I say, not as I do” example, because here I’m only offering my users two font sizes: 10pt and 50pt. Go big or go home, I say.

To do this, we create a new file, which I’ve called myFontSize.jsx. There, we import EditorTools and EditorToolsSettings, and then use EditorToolsSettings.fontSize to make adjustments to the Font Size tool. In this case, we define an object that includes as many items as we want to appear in the dropdown, as well as the text that will appear to the user and the value that will be applied to the font-size style.

const fontSizeToolSettings = {
  ...EditorToolsSettings.fontSize,
  items: [
    {
      text: '10',
      value: '10pt',
    },
    {
      text: '50',
      value: '50pt',
    },
    {
        text: /* Your dropdown text here */
        value: /* Your font-size value here */  
    }],
};

Then to implement the changes we made to the font size tool settings, we create and export a new component that will take the place of the old font size tool, but with our customizations applied:

const CustomFontSize =
  EditorTools.createStyleDropDownList(fontSizeToolSettings);

const MyFontSizeTool = (props) => <CustomFontSize {...props} />;

export default MyFontSizeTool;

And then back in the file where we’re using our React Text Editor, we can just import MyFontSizeTool and call it in the Editor tool list, just like any pre-existing tool!

<Editor
  tools={[MyFontSizeTool]}
/>

With this, you can create a toolbar full of totally custom tools, adjust our existing tools, or use any combination of those alongside our existing suite of tools. Whether you’re looking for a fully featured word processing component, or a streamlined user-friendly text editor with only a few necessary tools, the KendoReact Rich Text Editor fits the bill.

What you see isn’t what you get with the React Rich Text Editor—there’s so much more under the surface!

Our Editor is deceptively simple—intuitive and easy to use on the user side, but with depths of customization and configuration for developers hidden below. The sky is truly the limit with this component, and our extensive docs and support resources are there to support you every step of the way.

Ready to give it a shot? Try the whole suite of components free for 30 days, and see if our Rich Text Editor is just your type (get it??).