Migrate from TinyMCE or CKEditor

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: true }) and self-host Yjs + WebSocket provider.
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: true   // concurrent typing preview
});

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 v2.0 stack 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.