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

How to migrate from CKEditor to TinyMCE

Ben Long

March 8th, 2022

Written by

Ben Long

Category

How-to Use TinyMCE

The CKEditor 5 framework provides a set of components allowing developers to create a rich text editing solution for their applications. Five ready-to-use builds are provided for developers, each with a particular set of features and default configurations that cater for the most “common editing use cases”. However, when developing innovative solutions that will really wow your customers, at Tiny, “common” is a word we prefer to avoid. What you really need is the ability to customize your editing experience to suit your particular scenario with ease.

When working with CKEditor, you usually need to produce a whole new build of the editor every time you make a change. TinyMCE, on the other hand, allows you to make changes to the configuration without having to rebuild the editor every time.

If you are thinking about switching out your application’s rich text editor to enhance the power and popularity of your applications, this article provides step by step instructions for migrating from CKEditor 5 to TinyMCE 5.

CKEditor 5 rich text editor working

CKEditor 5 rich text editor

TinyMCE running example

TinyMCE 5 rich text editor

1. Basic installation

There are myriad ways in which you may have installed and configured the rich text editor in your applications; however, for an illustration of how easy it can be to switch from CKEditor 5 to TinyMCE 5, we will use CKEditor’s classic editor build as an example.

When you have the classic CKEditor 5 editor integrated with your applications, you will have the following snippets of code in your HTML – an element on which to instantiate the editor, a reference to the editor code, and the Javascript code that instantiates the editor on the element. For example:

<div id="editor"></div>

<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Fortunately, the TinyMCE 5 editor is integrated in much the same way, with more or less the same three snippets of code.

In order to migrate your integration from CKEditor to TinyMCE, the first thing you need to do is change your HTML code so that it references the TinyMCE package and initializes the TinyMCE editor instead. For example:

<div id="editor"></div>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    tinymce.init({
        selector: '#editor'
    });
</script>

Remember 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.

2. Plugins

Once you have the default editor up and running, you’ll find that the two editors differ in the default plugins and toolbar configuration provided to users, however, both can be customized to suit your needs. Fortunately, where CKEditor requires a whole new build to take place in order to add plugins, TinyMCE plugins can be added on the fly with a single line of HTML code.

In order to replicate the functionality provided to users by the classic CKEditor, simply add the link, lists, image, table, and media plugins to your TinyMCE configuration using the plugins option:

tinymce.init({
    selector: '#editor',
    plugins: 'link, lists, image, table, media'
});

3. Toolbar options

Toolbar options are configured and customized in much the same way in both editors. For example, a toolbar configured with formatting styles, bold, italic, undo, and redo options (with separators) is configured in CKEditor 5 as follows:

toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]

In TinyMCE, these same options are configured with the following code:

toolbar: 'styleselect | bold italic | undo redo'

So the next step to migrate from the classic CKEditor will be to customize the toolbar with the same options provided by the default CKEditor build (and remove the TinyMCE menu bar at the same time):

tinymce.init({
    selector: "textarea",
    plugins: "link, lists, image, table, media",
    menubar: false,
    toolbar: "styleselect | bold italic link bullist numlist | outdent indent | image blockquote table media undo redo"
});

Complete example

Here is a complete HTML example with the TinyMCE configuration that you can use as a starting point for your migration from CKEditor 5. Simply copy and paste the following code into an HTML file and open it in a browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
      tinymce.init({
        selector: '#editor',
        plugins: 'link, lists, image, table, media',
        menubar: false,
        toolbar: "styleselect | bold italic link bullist numlist | outdent indent | image blockquote table media undo redo"
      });
    </script>

  </head>

  <body>
  <h1>TinyMCE Example</h1>
      <div id="editor">Hello, World!</div>
  </body>
</html>

TinyMCE following the migration from CKEditor

TinyMCE 5 based on the above configuration.

What’s next?

  • Getting and saving data - If you are integrating with HTML forms, there is little left for you to do; however, if you are looking for more information on how to work with the editor content, check out our blog post about how to get and set content in TinyMCE and also our documentation about the TinyMCE autosave plugin.
  • Block quotes -  Block quotes can make your content significantly more visually appealing. Although rich text editors provide excellent HTML formatting, content styling is left to your UX and development teams to handle. Tiny’s principal designer has written a blog post on how to get started with your own very cool blockquote styling in TinyMCE.
  • 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. We are ready to help you take your applications to the next level.

You can get start with TinyMCE right away – sign up for a FREE API key to recieve access to the TinyMCE premium plugin range for your project.

CKEditorConfigurationMigrationTinyMCE
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