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

How to migrate from Quill to TinyMCE

Ben Long

March 1st, 2022

Written by

Ben Long

Category

How-to Use TinyMCE

When you’re developing a product that involves written input from users, you need to think about the functionality they might need as part of that content creation experience.

New technology for your product is exciting. However, is the new technology enough for your users? Do you want to empower your users with a richer text editing experience – one in which they can apply styles and formatting? 

Once the novelty of the new wears off, you might find limitations that lower productivity. A richer editing experience might be needed.

Are you looking to enhance your products with first-class productivity, compliance, collaboration, and file management like those features provided by TinyMCE? When the pressure mounts, migrating to a richer text editing experience is the best solution.

If you are currently using the Quill editor in your application, and you are looking to upgrade, this article provides an overview of the steps involved in migrating away from Quill to TinyMCE.

Contents

Preparing for WYSIWYG Migration
Complete your checklist
Convert your database
WYSIWYG migration: 1. Integration
WYSIWYG migration: 2. Plugins and Toolbars
WYSIWYG migration: 3. Format
Complete migration example
What's the next step?

The Quill editor.
The Quill editor
The TinyMCE editor
The TinyMCE editor

 

Preparing for WYSIWYG migration

Planning out any software migration is paramount. You wouldn’t plan a hike in a national park without a map, compass, and supplies. Migration planning is the same. You need a roadmap to follow, and a support system to accomplish the journey.

Start by working on support and buy-in from your team. If you have a larger organization, this can take more time, since there are more department representatives to speak with so factor that into your timeframe projections. Find one key staff member from each team or department to act as advocates for the migration.

The power of advocates is that they help support the migration if and when you run into organization blockers. Talk to your migration team about how to frame the migration to the leadership team:

  • Describe how the migration fulfills a business need
  • Outline how it will attract new talent
  • Demonstrate how it will keep your business competitive

Make sure you and your advocates are ready with these arguments to help get the initiative going.

Have you completed a checklist?

After establishing buy-in for a change, build a checklist of essential migration tasks. Use the checklist to determine risk. Your checklist could include all the factors affecting the migration’s integrity such as:

  • Making backups
  • Completing an inventory of content written and saved in your database
  • Recording any unique edge cases you need to confirm works.

Assign the list items a rating from 1 to 6. For example:

  • inventory (2)
  • backups (2)
  • edge case checking (4)

Then adjust the score as you complete each checklist task.

Use the risk factor of each checklist item to gauge the amount of time required to complete each item and estimate the time each task will take. Then multiply the estimated hours by the risk factor, to give you a final time estimate.

Another kind of inventory to complete (specifically for rich text editor migration) is an inventory of actions. Create a list of all the actions – commonplace or obscure – you currently complete with your Quill WYSIWYG. When you install TinyMCE, test each task to make sure it works. It’s important not to neglect this inventory of functions when planning a migration.

Converting your Quill database from Delta format

What is the Delta format? It’s a subset of JavaScript Object Notation (JSON) format. One of the ways web applications can process and display information is in JSON format. Contrasting JSON with HTML, JSON describes content in a format that a browser and humans can read by listing a set of keys and values that describe those keys. In contrast, HTML format wraps content in tags that describe to the browser the shape of the content, and so that the content is human readable.

When you save any content written in the Quill editor, it’s converted into Delta format and saved. Here’s an example:

{
  ops: [
    { insert: 'This', attributes: { bold: true } },
    { insert: ' is ' },
    { insert: 'grey', attributes: { color: '#cccccc' }},
    {insert: ‘ text.’ }
    ]
}

Quill interprets this as: This is grey text.

What’s happening here is that the ops object contains a set of instructions telling the Quill editor to insert the text into the editor, and style it with the value listed by the attribute key.

The purpose of the Delta format is understanding: Quill is a rich text editor that interprets the information stored inside its editor area. This can be useful for applications that export and broadcast the information in the editor, and need to be able to parse and understand the information.

You can convert your saved content out of the Delta format when you set out to migrate (make sure you include time for conversion in your checklist of migration tasks!)There are a number of community-based tools built for conversion. A Node Package Manager (npm) tool can be configured to convert Quill content from Delta to HTML format as you type. 

For configuring a conversion tool, the element to use when converting the Quill Delta’s to HTML is the quill.root.innerHTML. You could set up your application to include some kind of logic for converting and storing converted Deltas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script referrerpolicy="origin" type="text/html" src=""></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<h2>Quill Delta to HTML test</h2>
<div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong>text</p>
    <p><br></p>
</div>

<!-- use the 'quill.root.innerHTML function and a POST request to output Delta content in HTML format' -->
<form id="quill-form"
      method="POST"
      onsubmit="this['contents'].value = quill.root.innerHTML;"
      name="QuillcontentForm">
    <input type="hidden" name="id" value="239" />
    <input type="hidden" name="contents" value="" />
</form>
<button form="quill-form">Convert Quill Editor Content</button>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

</body>
</html>

WYSIWYG migration steps

1. Integration

In most cases the Quill editor is integrated into your applications with 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">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Migration from Quill to TinyMCE is simplified by the fact that the TinyMCE editor is integrated in more or less the same way, with three similar snippets of code.

In order to migrate your integration from Quill 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>

You’ll need 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 user experience.

Here’s an example of the transition from Quill to TinyMCE:

A gif showing the practical migration steps to change from Quill to TinyMCE WYSIWYG in a web application.

2. Plugins and toolbar options

Once you have the default editor up and running, you’ll notice that the two editors differ in the default plugins and toolbar configuration provided to users, but both can be customized to suit your needs.

When using Quill, you may have customized the toolbar options with the toolbar module to better suit your user experience. For example, a simplified user experience might provide only bold, italic, underline, and strike options, as follows.

<script>
var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});
</script>

TinyMCE toolbar options (and plugins) are configured in a similar way. For example, let’s say you are migrating from Quill and you want your TinyMCE editor to have the same user options as the default Quill editor. You can adjust the TinyMCE initialization script and use the toolbar to customize the options provided to users. You’ll also need to add any plugins not included with the core editor. (The menubar is also removed by setting it to false.) For example:

<script>
tinymce.init({
  selector: "#editor",
  plugins: "lists link",
  toolbar: "styleselect bold italic underline link numlist bullist removeformat",
  menubar: false
});
</script>

3. Formats

At this point the editor appears to provide the same functionality as the Quill editor; however, you will notice that the formatting dropdown provides many more options than those provided in the default Quill editor. Bonus! However, to avoid confusion among your user base, who have grown accustomed to a particular user experience, you may prefer to stick to the styles they are used to. You can configure these using the style_formats option. For example, the following code will revert the styles in the dropdown to those provided in the default Quill editor - Heading 1, Heading 2, Heading 3, and Normal:

<script>
tinymce.init({
  selector: "textarea",
  plugins: "lists link fullscreen",
    toolbar: "styleselect bold italic underline link numlist bullist removeformat",
    style_formats: [
      {title: 'Heading 1', block: 'h1'},
      {title: 'Heading 2', block: 'h2'},
      {title: 'Heading 3', block: 'h3'},
      {title: 'Normal', block: 'p'}
    ],
  menubar: false
});
</script>
TinyMCE with Quill default options.
TinyMCE with Quill default options

Complete WYSIWYG migration example

Here is a complete HTML example with the TinyMCE configuration that you can use as a starting point for your migration from Quill. 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: "lists link fullscreen",
        toolbar: "styleselect bold italic underline link numlist bullist removeformat",
        style_formats: [
          {title: 'Heading 1', block: 'h1'},
          {title: 'Heading 2', block: 'h2'},
          {title: 'Heading 3', block: 'h3'},
          {title: 'Normal', block: 'p'}
        ],
        menubar: false
      });
    </script>
  </head>
  <body>
  <h1>TinyMCE Example</h1>
      <div id="editor">Hello, World!</div>
  </body>
</html>

What’s next for WYSIWYG migration?

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

If you run into any issues, support is available as a part of TinyMCE’s Enterprise and Tiny Cloud Subscriptions to help facilitate and finish any large scale migration. You can also reach out to StackOverflow with the TinyMCE tag will put you in touch with Tiny's online community. 

To try out TinyMCE, you can sign up for a free API key, and see how our range of plugins can help support your use cases and needs.

MigrationQuillHTMLTinyMCE
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