Migrate from TinyMCE, CKEditor, Froala, Quill, Lexical, or Tiptap

Why teams move

• No webpack / custom build. CKEditor 5 requires a build pipeline to mix features. We ship one bundle and toggle features via config.
• Perpetual license vs CKEditor’s five separate subscription SKUs (Real-time Collab, Track Changes, Comments, Revision History, AI).
• Self-host on entry tier — CKEditor’s enterprise features are Custom-tier pricing.
• Wider framework coverage — Blazor, Web Forms, Classic ASP, PHP, and more.

Step-by-step checklist

1. Install the npm package: npm install @@richscripts2/richtexteditor
2. Remove your CKEditor custom build / webpack config entirely.
3. Replace ClassicEditor.create(...) with new RichTextEditor("#editor", { toolbar: "full" });
4. Map your CKEditor toolbar: [...] items to our toolbar config (see cheat sheet).
5. Collaboration: replace CKEditor Cloud Services with editor.collab.attach({ doc, provider, textSync: "crdt" }) and self-host Yjs + WebSocket provider. (Use textSync: true if you want the legacy snapshot mode for back-compat.)
6. AI: swap cloudServices config for editor.aiToolkit.setResolver(fn).
7. Paste existing CKEditor content directly — HTML output is compatible.

Config cheat sheet

Basic setup

import ClassicEditor from
  '@@ckeditor/ckeditor5-build-classic';

ClassicEditor.create(
  document.querySelector('#editor'),
  {
    toolbar: {
      items: ['bold','italic','|',
        'bulletedList','numberedList','|',
        'link','imageUpload']
    }
  }
);

<link rel="stylesheet"
      href="richtexteditor/rte_theme_default.css">
<script src="richtexteditor/rte.js"></script>

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

<script>
new RichTextEditor("#editor", {
  toolbar: "custom",
  toolbar_custom:
    "{bold,italic}|{insertunorderedlist,insertorderedlist}"
    + "|{insertlink,insertimage}"
});
</script>

Real-time collaboration

ClassicEditor.create(el, {
  cloudServices: {
    tokenUrl: '/api/cke-token',
    webSocketUrl:
      'wss://cs.cke-cs.com/...'
  },
  collaboration: { channelId: docId }
});

import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

const doc = new Y.Doc();
const provider = new WebsocketProvider(
  "wss://your-server", docId, doc);

editor.collab.attach({
  doc, provider,
  user: { id, name, color },
  textSync: "crdt"  // per-node Yjs concurrent typing
});

AI Assistant

ClassicEditor.create(el, {
  ai: {
    openAI: {
      requestHeaders: { Authorization: '...' },
      apiUrl: 'https://api.openai.com/v1/...'
    }
  }
});

var editor = new RichTextEditor("#editor", {
  aiToolkitEnabled: true
});

editor.aiToolkit.setResolver(async (req) => {
  const r = await fetch("/api/my-ai", {
    method: "POST",
    body: JSON.stringify(req)
  });
  return r.json();
});

Plugin equivalence

Behavior differences to know about

What you gain

• No build pipeline — one <script> tag, works.
• Perpetual license vs five separate CKEditor subscriptions.
• Self-host everything day one — including Yjs collab (your choice of provider).
• Dictation, mobile toolbar mode, and public release notes out of the box.
• Blazor Server, ASP.NET Web Forms, Classic ASP, PHP bindings.

Why teams move

• Lower cost. Froala’s commercial license is per-project. We’re a perpetual domain license that includes Track Changes, Comments, Revision History, and the AI Toolkit — features Froala doesn’t ship at all.
• Wider feature set. Froala has no Track Changes and no Threaded Comments. Our base license ships both in the base license.
• BYOK AI without manual integration. Froala AI Assist requires hand-rolling the resolver call; ours is one-line setResolver(fn) on the client or DI on the server.
• No webpack. Drop a single <script> tag and you’re done; Froala’s plugin selection requires careful module imports.

Step-by-step checklist

1. Install the npm package: npm install @@richscripts2/richtexteditor
2. Replace your Froala script tags with <script src="richtexteditor/rte.js"></script> + <link rel="stylesheet" href="richtexteditor/rte_theme_default.css">.
3. Replace new FroalaEditor('#editor', { ... }) with new RichTextEditor("#editor", { toolbar: "full" });
4. Map your toolbarButtons array to a toolbar_* config string (see cheat sheet below).
5. If you use Froala AI Assist, swap the manual fetch / register-command for editor.aiToolkit.setResolver(async (req) => ...).
6. Existing HTML keeps working; submit forms / read content as normal.

Config cheat sheet

Basic setup

new FroalaEditor('#editor', {
  toolbarButtons: [
    'bold', 'italic', 'underline', '|',
    'formatOL', 'formatUL', '|',
    'insertLink', 'insertImage'
  ],
  height: 500
});

new RichTextEditor("#editor", {
  toolbar: "custom",
  toolbar_custom:
    "{bold,italic,underline}|{insertorderedlist,insertunorderedlist}"
    + "|{insertlink,insertimage}",
  height: "500px"
});

AI integration

FroalaEditor.RegisterCommand('aiAssist', {
  callback: function () {
    fetch('/my-proxy', { ... })
      .then(/* manual integration */);
  }
});

var editor = new RichTextEditor("#editor", {
  aiToolkitEnabled: true
});

editor.aiToolkit.setResolver(async (req) => {
  const r = await fetch("/api/my-ai", {
    method: "POST", body: JSON.stringify(req)
  });
  return r.json();
});

Plugin equivalence

Behavior differences to know about

What you gain

• Track Changes + Threaded Comments + Revision History — Froala ships none of these.
• Slash commands & @@mentions — Notion-style inline picker.
• Yjs real-time presence + concurrent typing preview.
• Dictation via Web Speech API.
• React, Vue, Angular, Blazor Server, ASP.NET Core, Web Forms, Classic ASP, PHP bindings.

Why teams move

• Quill is feature-frozen. Quill 2.0 (April 2024) restored maintenance but the module ecosystem stayed thin. No first-party Track Changes, Comments, Revisions, AI, Mentions, or Dictation — community modules vary in quality and abandonment risk.
• Delta ↔ HTML round-trip is lossy. Quill stores content as a Delta JSON document; consumers downstream usually want HTML or DOCX. We give you HTML, structured JSON, Markdown, and DOCX export from one API.
• Custom blots & formats are heavy work. Adding a new content type in Quill means writing a Blot subclass and registering it. Our toolbar / dropdown / plugin factories are a few lines.
• Frameworks aren’t first-class. Quill has community React / Vue wrappers; we ship native React, Vue, Angular, Blazor Server, ASP.NET Web Forms, Classic ASP, and PHP bindings.

Step-by-step checklist

1. Install: npm install @@richscripts2/richtexteditor
2. Replace your Quill assets: drop quill.snow.css and quill.js; add <link rel="stylesheet" href="richtexteditor/rte_theme_default.css"> + <script src="richtexteditor/rte.js"></script>.
3. Replace new Quill('#editor', { ... }) with new RichTextEditor("#editor", { toolbar: "full" });
4. Convert any existing Delta documents to HTML once: pass them through Quill's QuillDeltaToHtmlConverter (or your own renderer) and store the HTML. After that, content is plain HTML.
5. Replace Delta read / write paths with editor.getHTMLCode() / editor.setHTMLCode(html) — or getJSON() / setJSON() if you want to keep a structured-content workflow.
6. Map your modules.toolbar array to a toolbar string (cheat sheet below).
7. If you have custom Blots (mention chips, embeds, etc.) replace them with our mentions / slashCommands APIs or with insertElement().

Config cheat sheet

Basic setup

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      ['clean']
    ]
  }
});

const delta = quill.getContents();
const html  = quill.root.innerHTML;

const editor = new RichTextEditor("#editor", {
  toolbar: "custom",
  toolbar_custom:
    "{bold,italic,underline}|" +
    "{insertorderedlist,insertunorderedlist}|" +
    "{insertlink,insertimage}|" +
    "{removeformat}"
});

const html = editor.getHTMLCode();
const json = editor.getJSON(); // structured-content

Mentions (Quill needs quill-mention module)

// install: npm i quill-mention
import 'quill-mention';

new Quill('#editor', {
  modules: {
    mention: {
      allowedChars: /^[A-Za-z\s]*$/,
      mentionDenotationChars: ['@@', '#'],
      source: function (search, render) {
        fetch('/api/users?q=' + search)
          .then(r => r.json())
          .then(render);
      }
    }
  }
});

const editor = new RichTextEditor("#editor", {
  mentionsEnabled: true
});

editor.mentions.register({
  trigger: "@@",
  search: async (q) => {
    const r = await fetch("/api/users?q=" + q);
    return r.json(); // [{ id, name }]
  }
});

Module / API equivalence

Behavior differences to know about

What you gain

• Comments + Track Changes + Revision History — all base license; Quill has none.
• AI Toolkit with Ask AI, AI Chat, AI Review drawer, BYOK resolver, streaming, DOCX export.
• HTML / JSON / Markdown all from one editor — no Delta converter library.
• Slash commands & @@mentions built in, no third-party module risk.
• Frameworks beyond JS — Blazor Server, ASP.NET Core / Web Forms / Classic ASP, PHP.

Why teams move

• Lexical is a framework, not an editor. Meta’s headless model means you build every toolbar, every plugin, every UI piece yourself. Productive teams ship in weeks; the productivity tax never goes away. We ship a finished editor and let you customize on top.
• No commercial features out of the box. Lexical is MIT and has no track changes, comments, revisions, AI, dictation, DOCX export, or PDF export in core. You either build them or pull in community / commercial add-ons (Liveblocks, Mantle, etc.).
• No commercial support tier. Lexical’s GitHub is the only support channel. We answer support tickets directly, ship hotfixes, and you have a vendor to call.
• React-locked. Lexical’s ergonomic surface is the React package; non-React frameworks reach into @@lexical/headless with a steep learning curve. We ship native bindings for 7 frameworks.

Step-by-step checklist

1. Install: npm install @@richscripts2/richtexteditor
2. Decide: keep Lexical’s rendered output as initial content, or have users re-edit it inline. Either path works because Lexical serializes to HTML on export ($generateHtmlFromNodes).
3. Replace <LexicalComposer> + <RichTextPlugin> + every plugin component with a single <RichTextEditorComponent> from @@richscripts2/richtexteditor/react.
4. Delete your custom toolbar component, OnChangePlugin, HistoryPlugin, ListPlugin, LinkPlugin, MarkdownShortcutPlugin — all built in.
5. If you have custom Lexical nodes (mention chips, embeds), port them to editor.mentions.register() / editor.slashCommands.register() / editor.insertElement().
6. If you used Liveblocks for real-time, swap to editor.collab.attach({ doc, provider }) with a Yjs provider.
7. Replace your custom DOCX export pipeline with editor.aiToolkit.exportDocx().

Config cheat sheet

Basic setup

// You build all of this yourself:
import { LexicalComposer } from '@@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@@lexical/react/LexicalOnChangePlugin';
import { ListPlugin } from '@@lexical/react/LexicalListPlugin';
import { LinkPlugin } from '@@lexical/react/LexicalLinkPlugin';
import ToolbarPlugin from './ToolbarPlugin'; // ← ~300 LOC of your own code

<LexicalComposer initialConfig={config}>
  <ToolbarPlugin />
  <RichTextPlugin
    contentEditable={<ContentEditable />}
    placeholder={<div>Enter…</div>}
    ErrorBoundary={LexicalErrorBoundary}
  />
  <HistoryPlugin />
  <ListPlugin /> <LinkPlugin />
  <OnChangePlugin onChange={onChange} />
</LexicalComposer>

import { RichTextEditorComponent } from
  "@@richscripts2/richtexteditor/react";

<RichTextEditorComponent
  config={{
    toolbar: "full",
    enableAiToolkit: true,
    commentsEnabled: true,
    revisionHistoryEnabled: true
  }}
  onChange={(html) => setHtml(html)}
/>

Custom node → custom button

// 1. extend DecoratorNode
class CalloutNode extends DecoratorNode { ... }
// 2. importJSON / exportJSON
// 3. createDOM / updateDOM
// 4. transform plugin to insert it
// 5. toolbar button to call $insertNodes
// 6. theme entry
// 7. SSR rendering helper
// (each step is real code)

editor.createToolbarButton("callout", {
  text: "Callout",
  click: (ed) => {
    const div = document.createElement("div");
    div.className = "callout";
    div.innerHTML = ed.getSelectedText();
    ed.insertElement(div);
  }
});

Lexical concept → RichTextEditor equivalent

Behavior differences to know about

What you gain

• Finished editor — toolbar, dialogs, paste filtering, table support, image editor, all out of the box.
• Commercial support with named contacts, hotfixes, and a roadmap.
• AI Toolkit, Track Changes, Comments, Revision History, Mentions, Slash Commands, Dictation — all base license.
• Frameworks beyond React — Vue, Angular, Blazor Server, ASP.NET Core / Web Forms / Classic ASP, PHP.
• DOCX + PDF export — Lexical has neither.

Why teams move

• Pricing. Tiptap’s premium extensions (Comments, History, Document AI, Mathematics, Drag handle) and Tiptap Cloud (real-time, document storage) are paid per-author or per-doc subscriptions. We’re a one-time perpetual license that includes everything.
• Headless tax. Tiptap is ProseMirror under the hood — powerful, but you build your toolbar, dialogs, paste behaviour, table UI, and image-edit affordances yourself. We ship a finished editor.
• One bundle. Tiptap is dozens of npm packages (@@tiptap/core, @@tiptap/starter-kit, @@tiptap/extension-*); we ship one rte.js with feature flags.
• Self-host without an enterprise contract. Tiptap Cloud’s real-time and Document AI features require their hosted services or an Enterprise self-host agreement. Our collab + AI ship in the base download.

Step-by-step checklist

1. Install: npm install @@richscripts2/richtexteditor
2. Drop your @@tiptap/* packages and the Tiptap Pro packages from package.json.
3. Replace useEditor({ extensions, content }) + <EditorContent /> with <RichTextEditorComponent config={...} /> from @@richscripts2/richtexteditor/react (or the Vue / Angular / vanilla variants).
4. Delete your custom toolbar React component — built in via config.toolbar.
5. If you used @@tiptap/extension-collaboration + y-prosemirror, swap for editor.collab.attach({ doc, provider }). The Y.Doc and provider stay yours.
6. If you used Tiptap Pro Comments / Document History / Document AI, replace them with the base-license equivalents (commentsEnabled, revisionHistoryEnabled, aiToolkitEnabled + setResolver).
7. Custom Tiptap extensions (Mark / Node) port to createToolbarButton() + insertElement() / surroundByTagName().

Config cheat sheet

Basic setup

import { useEditor, EditorContent } from '@@tiptap/react';
import StarterKit from '@@tiptap/starter-kit';
import Link from '@@tiptap/extension-link';
import Image from '@@tiptap/extension-image';
import Placeholder from '@@tiptap/extension-placeholder';

const editor = useEditor({
  extensions: [
    StarterKit, Link, Image,
    Placeholder.configure({ placeholder: 'Type…' })
  ],
  content: '<p>Hello</p>',
  onUpdate: ({ editor }) => setHtml(editor.getHTML())
});

<MyToolbar editor={editor} />     // ~150 LOC you wrote
<EditorContent editor={editor} />

import { RichTextEditorComponent } from
  "@@richscripts2/richtexteditor/react";

<RichTextEditorComponent
  config={{
    toolbar: "full",
    placeholder: "Type…",
    enableAiToolkit: true,
    commentsEnabled: true,
    revisionHistoryEnabled: true
  }}
  onChange={setHtml}
/>

Real-time collab

import Collaboration from '@@tiptap/extension-collaboration';
import CollaborationCursor from '@@tiptap/extension-collaboration-cursor';
import * as Y from 'yjs';
import { TiptapCollabProvider } from '@@hocuspocus/provider';
// ↑ Tiptap Cloud subscription OR self-hosted Hocuspocus

const ydoc = new Y.Doc();
const provider = new TiptapCollabProvider({
  appId: 'XXXXX',
  name: 'doc-1', document: ydoc, token: '...'
});

useEditor({
  extensions: [
    StarterKit.configure({ history: false }),
    Collaboration.configure({ document: ydoc }),
    CollaborationCursor.configure({ provider, user })
  ]
});

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
  'wss://your-server', 'doc-1', ydoc
);

editor.collab.attach({
  doc: ydoc,
  provider,
  textSync: "crdt"  // per-node Yjs concurrent typing
});

AI

// Subscription required.
import Ai from '@@tiptap-pro/extension-ai';

useEditor({
  extensions: [
    StarterKit,
    Ai.configure({
      appId: 'XXXXX',
      token: '...',
      autocompletion: true
    })
  ]
});

const editor = new RichTextEditor("#editor", {
  enableAiToolkit: true
});

editor.aiToolkit.setResolver(async (req) => {
  const r = await fetch("/api/ai", {
    method: "POST",
    body: JSON.stringify(req)
  });
  return r.json(); // any provider; BYOK
});

Extension → built-in mapping

Behavior differences to know about

What you gain

• Comments + Track Changes + Revision History + AI all in the base license — no Pro subscription, no Cloud account.
• Finished editor — no toolbar component to write, no paste-handling gotchas.
• BYOK AI with any provider — no Tiptap-managed token, no per-author seat metering.
• One-time perpetual license instead of per-author / per-doc subscriptions.
• Frameworks beyond React / Vue — Angular, Blazor Server, ASP.NET Core / Web Forms / Classic ASP, PHP.