Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to migrate from Slate.js to TinyMCE

Ben Long

March 14th, 2022

Written by

Ben Long

Category

How-to Use TinyMCE

Slate.js is a highly customizable framework for building rich text editors; however, it is important to remember that with limitless flexibility can come a limitless amount of coding. The Slate.js website provides an example of how to implement a rich text editor using a whopping 193 lines of code, whereas the same rich text functionality can be implemented with TinyMCE in just 21 lines of code.

By using TinyMCE, you can effectively simplify the amount of time and coding your development team spends on rich text components. TinyMCE is the world’s most popular rich text editor, powering 100+ million products worldwide. The editor is easy to deploy and is highly customizable to suit a broad range of applications and edge cases. Check out 9 examples of products you can build with TinyMCE.

In this article we’ll demonstrate how to migrate from Slate.js to TinyMCE using a simple example. Given the Slate.js docs provide ample information about how to get started with Slate.js using React, and given the current popularity of React, this example is also based on the React framework using the rich text editor example provided on the Slate.js site.

The Slate editor running a browser

The Slate editor.

TinyMCE working in a browser

The TinyMCE editor.

1. Import the TinyMCE libraries

Within your React project, start by installing the tinymce-react component from the command line with your package manager of choice; for example, if using npm:

$ npm install @tinymce/tinymce-react

Open the file that implements the Slate editor. It will contain code similar to the following:

const App = () => {
  // ...
  return (
    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
      // ...
    </Slate>
  );
};

In this file, import the TinyMCE Editor component by adding it to the list of imports.

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

2. Replace the Slate editor with the TinyMCE editor

In your React code you will have a function that defines the editor. For example, the rich text editor implemented on the Slate.js website looks like this:

const App = () => {
  const [value, setValue] = useState<Descendant[]>(initialValue)
  const renderElement = useCallback(props => <Element {...props} />, [])
  const renderLeaf = useCallback(props => <Leaf {...props} />, [])
  const editor = useMemo(() => withHistory(withReact(createEditor())), [])

  return (
    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
      <Toolbar>
        <MarkButton format="bold" icon="format_bold" />
        <MarkButton format="italic" icon="format_italic" />
        <MarkButton format="underline" icon="format_underlined" />
        <MarkButton format="code" icon="code" />
        <BlockButton format="heading-one" icon="looks_one" />
        <BlockButton format="heading-two" icon="looks_two" />
        <BlockButton format="block-quote" icon="format_quote" />
        <BlockButton format="numbered-list" icon="format_list_numbered" />
        <BlockButton format="bulleted-list" icon="format_list_bulleted" />
      </Toolbar>
      <Editable
        renderElement={renderElement}
        renderLeaf={renderLeaf}
        placeholder="Enter some rich text…"
        spellCheck
        autoFocus
        onKeyDown={event => {
          for (const hotkey in HOTKEYS) {
            if (isHotkey(hotkey, event as any)) {
              event.preventDefault()
              const mark = HOTKEYS[hotkey]
              toggleMark(editor, mark)
            }
          }
        }}
      />
    </Slate>
  )
} 

Replace this with the following code, remembering to replace no-api-key with your own Tiny API key. If you don’t already have one, you can get a free API key now which will provide you with access to all the standard text formatting options plus 44 core plugins that you can add or remove as needed to further enhance the editing experience.

const App = () => {
  return <Editor apiKey="no-api-key" />;
};

3. Customize the user options

Once you have the default editor up and running, TinyMCE is easily customized with a few lines of code; for example, in order to provide the same functionality as that provided by the Slate.js example, we can specify the toolbar options (and any associated plugins) in the editor initialization script as follows. We’ll remove the menu bar and set the editor width at the same time too.

const App = () => {
  return (
    <Editor
      apiKey="no-api-key"
      init={{
        menubar: false,
        plugins: "lists code",
        toolbar: "bold italic underline code h1 h2 blockquote numlist bullist",
        width: 700,
      }}
    />
  );
};

4. Remove any unused code

When implementing a rich text editor using Slate.js, you need to code a lot of additional “glue” to make it all stick together and work seamlessly, as demonstrated by the 193 lines of code required to implement the example rich text editor. However, while migrating to TinyMCE, you will most likely end up with a lot of unused code that you can remove to simplify your build. Most of the typical integration headaches have already been thought of and resolved by our engineering team to make it as simple and seamless as possible, and have been tried and tested in 100M+ products worldwide.

Complete example

Here is a complete example of the TinyMCE configuration that you can use as a starting point for your migration from Slate.js. To get started, create a new react app, install the tinymce-react component from the command line as shown above, and replace the code in App.js with the following:

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

const App = () => {
  return (
    <Editor
      apiKey="no-api-key"
      initialValue="<p>Hello, World!</p>"
      init={{
        menubar: false,
        plugins: "lists code",
        toolbar: "bold italic underline code h1 h2 blockquote numlist bullist",
        width: 700,
      }}
    />
  );
};
export default App;

TinyMCE migration complete

TinyMCE 5 based on the above configuration.

What’s next?

More help with TinyMCE in React - There’s loads more information about integrating TinyMCE with your React applications on our blog.

Customization Once you have migrated to TinyMCE, you have loads of new configuration options and UI customizations available to enhance your application’s user experience. Check out our article about how to customize toolbar options as well as skins and icons.

Additional help and support - For more complex migrations, you can contact our support team at any time for assistance.

MigrationTinyMCEJavascriptConfiguration
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-to Use TinyMCE

    How to load and post Ajax content in TinyMCE

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing