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

Migrating from Quill to TinyMCE

Joe Robinson

July 13th, 2021

Written by

Joe Robinson

Category

How-tos & Tutorials

New technology is exciting. Even if you pick up new software or hardware later in it’s development lifecycle, the excitement of the new is strong. However, once the novelty wears off, you might have found that there are small limitations lowering your productivity. Something might be missing that’s been wearing on the team for some time.

And when the pressure mounts, the solution is a careful and planned migration.

Even if the software you’re using isn’t painful, it’s good practice to regularly review and re-evaluate the benefits and abilities of your platforms and applications. 

To provide some insight on what’s involved in a migration, this post summarises the essential steps. These steps are designed for large scale organizations performing the migration, but the process is still relevant for changing your WYSIWYG rich text 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="<a href="https://cdn.quilljs.com/1.3.6/quill.snow.css">https://cdn.quilljs.com/1.3.6/quill.snow.css</a>" 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="<a href="https://cdn.quilljs.com/1.3.6/quill.js">https://cdn.quilljs.com/1.3.6/quill.js</a>"></script>

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

</body>
</html>

Changing WYSIWYG 

The actual step of changing from your Quill WYSIWYG to the new one involves removing the initializer scripts, and integrating new scripts. 

To migrate from Quill to TinyMCE:

1. Remove the Quill cdn script:

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

2. Remove any div elements with the Quill Editor:

<div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong>text</p>
    <p><br></p>
</div>

3. Take out the scripts that Initiate Quill, which are located at the end of the index.html file.

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

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

4. In the head tags of your applications index.html file, include the two script tags. One that holds your TinyMCE API key, and another that holds the tinymce.init function.

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.

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.

MigrationQuill
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-tos & Tutorials

    How to navigate TinyMCE with just a keyboard

    by Joe Robinson in How-tos & Tutorials
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© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing