CKEditor

I spent some time implementing CKEditor in the last couple days. I've implemented TinyMCE in the past as well. On the positive, it's far more consistent and bug-free than TinyMCE... by which I mean, where TinyMCE "feels" buggy, CKEditor has worked around awkward browser behavior to a much greater degree, making it "feel" much more solid. On the negative, if you want to extend it, the documentation is relatively sparse. I think this is mostly because CKEditor is relatively new (its API is very different from FCKEditor), and it would be reasonable to expect the CK 3.0 documentation to reach at least the quality of the FCK 2.0 docs soon.

In my case it:

"react": "18.2.0", "vite": "2.9.10",

Here is the solution that I found:

package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

Update for vite 4.4.8:

"vite": "4.4.8",

vite.config.ts

import commonjs from "vite-plugin-commonjs";

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      commonjs({
        filter(id) {
          if (["libs/ckeditor5/build/ckeditor.js"].includes(id)) {
            return true;
          }
        },
      }),
    ],
    optimizeDeps: {
      include: ["ckeditor5-custom-build"],
    },
    build: {
      commonjsOptions: { exclude: ["ckeditor5-custom-build"] },
    },
  };
});