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

September 27th, 2022

Written by

Ben Long

Category

How-to Use TinyMCE

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

Which is better – CKEditor or TinyMCE?

Both CKEditor and TinyMCE deserve recognition: both projects have positively shaped and innovated rich text editing. What sets them apart? Its two issues – project licensing and upgrades.

The open source licensing model that CKEditor 5 uses a GPL copy-left license. If you redistribute a program that includes GPL code, the license requires you to make your entire

program available under the GPL. While this can be a helpful strategy for encouraging ongoing, open source contributions, it is not ideal for most business models.

TinyMCE uses an MIT license. This license model has no limits on usage, users or developers. There is no requirement to share your source code.

Find out more about how TinyMCE compares in terms of features and support in our TinyMCE alternatives breakdown. 

How to migrate from CKEditor 5 to TinyMCE

1. Start with the 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 6, we’ll use CKEditor’s classic editor build as an example:

CKEditor 5 rich text editor working

CKEditor 5 rich text editor

TinyMCE running example

TinyMCE 5 rich text editor

When you have the classic CKEditor 5 editor integrated within your applications, you have the following snippets of code in your HTML:

CKEditor Code CKEditor Example

An element on which to instantiate the editor

<div id="editor"></div>
A reference to the editor code
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>;
The Javascript code that instantiates the editor on the element
<script>
  ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Fortunately, the TinyMCE 6 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:

TinyMCE Code TinyMCE Migration
An element on which to instantiate the TinyMCE editor
<div id="editor"></div>
A reference to the TinyMCE editor code
<script
  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
The Javascript code that instantiates the TinyMCE editor on the element
<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 that provides 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 is 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/6/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 6 based on the above configuration.

What’s next?

  • Getting and saving data – If you’re integrating with HTML forms, there’s 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’ve 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.

For additional help and support you can contact our support team at any time for assistance. We are ready to help you take your applications to the next level.

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 set up a CMS with Self-Hosted and Cloud 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