ckeditor / vite-plugin-ckeditor5

Vite plugin for building CKEditor 5 from source

CKEditor 5 Vite plugin

Integrate the CKEditor 5's build process in your Vite setup.

⚠️ Experimental feature

Using this plugin to build CKEditor 5 from source in Vite is still in the experimental phase. We encourage you to test it and give us feedback. However, there might be some issues in more complex application/usecases, thus using this solution in production applications is not yet recommended.

Usage

You should use this plugin when building CKEditor 5 from source in a Vite application. It handles loading the .svg icons and styles from the packages and theme package. If your editor is already built (e.g you downloaded it from CKEditor 5 Online Builder) then this plugin is not needed.

1. Install the package.

npm install -D @ckeditor/vite-plugin-ckeditor5
# or
yarn add -D @ckeditor/vite-plugin-ckeditor5

2. Import and use the plugin in Vite configuration.

// vite.config.js
import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig( {
	plugins: [
		ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
	]
} );

Options:

theme

This should be an absolute path to the main file in theme package. Example:

{ theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) }

Note: If you are using this plugin in an ESM project you may encounter an error stating that require.resolve is not a function. In this case you can add the following to the top of your vite.config.js file:

import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );

Known issues

• This plugin will not emit any translation files and only english is currently supported.
• When using the Export to Word or Export to PDF plugins the editor styles will not be automatically collected.

Releasing package

Changelog

Before starting the release process, you need to generate the changelog:

npm run changelog

Publishing

After generating the changelog, you are able to release the package.

First, you need to bump the version:

npm run release:bump-version

You can also use the --dry-run option in order to see what this task does.

After bumping the version, you can publish the changes:

npm run release:publish

As in the previous task, the --dry-run option is also available.

Note: Only the dist/ directory will be published.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.

vite-plugin-ckeditor5's Issues

vite:css warnings on build

When building ckeditor5 with vite I have a lot of warnings:

transforming (3476) ../node_modules/@ckeditor/ckeditor5-image/src/imageinsertviaurl.js[vite:css] Complex selectors in ':is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover))::after' can not be transformed to an equivalent selector without ':is()'.
91 |                    }
92 |  
93 |  :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover))::after {
   |   ^
94 |                                    display: none;
95 |                            }
[vite:css] Complex selectors in ':is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled):not(.does-not-exist))::after' can not be transformed to an equivalent selector without ':is()'.
91 |                    }
92 |  
93 |  :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled),.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover),.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover))::after {
   |   ^
94 |                                    display: none;
95 |                            }

and so on...

think that the relevant part is:
Complex selectors in ':is(...)::after' can not be transformed to an equivalent selector without ':is()'.

Vitejs 4.4.2
"@vitejs/plugin-react-swc": "^3.3.2"
"@ckeditor/vite-plugin-ckeditor5": "^0.1.3"

Is there anything I can do to get rid of this warnings?
Thanks

missing/unneccessary css sourcemaps for ckeditor plugins

I get this error in chrome dev tools when I run vite --host --port 8346

DevTools failed to load source map: Could not load content for http://localhost:8346/ckeditor_src/node_modules/@ckeditor/<anything>.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

vite.config.js

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig(({ command, mode, ssrBuild }) => {
    const prod = mode == 'production';
    return {
        // build: {...}
        plugins: [
            ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
        ],
        server: {
            watch: {
                usePolling: true,
            },
        }
    };
});

Filesystem (it is at the root, using docker):

/ckeditor_src
/ckeditor_src/node_modules
/ckeditor_src/index.html
/ckeditor_src/package.json
/ckeditor_src/vite.config.js

My project is essentially the starter project produced by the ck source builder, I just switched from webpack to vite.

I believe the /*# sourceMappingURL=/ckeditor_src/node_modules/@ckeditor/ckeditor5-<...>.css.map */ is added by vite-ckeditor5-styles-loader (tried to debug and figure out what was going on....)

This does not affect/occur in production builds.

TypeError: this.content.trim is not a function

I followed these instructions for building CKEditor from source with Vite 4.3.3 and React 18.2.0, but I'm getting the following console error:

ckeditor.tsx:157 TypeError: this.content.trim is not a function
    at IconView._updateXMLContent (iconview.js:65:73)
    at IconView.render (iconview.js:48:14)
    at IconView.<anonymous> (observablemixin.js:181:45)
    at IconView.fire (emittermixin.js:146:47)
    at <computed> [as render] (observablemixin.js:184:29)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:179:18)
    at ViewCollection.<anonymous> (viewcollection.js:63:18)
    at ViewCollection.fire (emittermixin.js:146:47)
    at ViewCollection.addMany (collection.js:106:18)
    at ViewCollection.add (collection.js:75:21) {phase: 'initialization', willEditorRestart: false}

Here is my component:

import { CKEditor } from "@ckeditor/ckeditor5-react";
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";

const editorConfiguration = {
    plugins: [Essentials, Bold, Italic, Paragraph],
    toolbar: ["bold", "italic"],
};

export default function Editor() {
    return (
        <CKEditor
            editor={ClassicEditor}
            config={editorConfiguration}
            data="<p>Hello from CKEditor 5!</p>"
        />
    );
}

Webspellchecker and Mathtype are not working with Vite plugin

Steps

1. Add Webspellchecker or Mathtype plugins to the editor build using Vite and vite-plugin-ckeditor5.
2. Start Vite dev server.

Result

The page crashes and the editor is not available. There is an error in the console:

TypeError: Cannot read properties of null (reading 'getAttribute')
    at IconView._updateXMLContent (iconview.js:67:33)
    at IconView.render (iconview.js:48:14)
    at IconView.<anonymous> (observablemixin.js:181:45)
    at IconView.fire (emittermixin.js:146:47)
    at <computed> [as render] (observablemixin.js:184:29)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:179:18)
    at ViewCollection.<anonymous> (viewcollection.js:63:18)
    at ViewCollection.fire (emittermixin.js:146:47)
    at ViewCollection.addMany (collection.js:106:18)
    at ViewCollection.add (collection.js:75:21)

hi

hi i followed your react-sample(vite-ckeditor5) proejct.
but i have some problem like this -> (this.content.trim is not a function)

i don't know how to fix it :(

my source is

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import { CKEditor } from '@ckeditor/ckeditor5-react';
const editorConfig = {
plugins: [Essentials, Paragraph, Bold, Italic, Underline],
toolbar: ['bold', 'italic', 'underline'],
};
const CkEditor = () => {
return (
<>

Editor:

<CKEditor
editor={ClassicEditor}
config={editorConfig}
data="

Hello from CKEditor 5!

"
onReady={editor => {
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
</>
);
};

export default CkEditor;

and also
i put this code in vite.config.ts

import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),

can you solve my problem?

theme issue in windows

The plugin works fine in a linux environment, but in my windows machine the theme is not getting picked, see below how it is rendered:

TypeError: Cannot read properties of undefined (reading '_source') at new _Rect (rect.js:52:27)

Hi,

I have an error when I execute ckeditor with vite-plugin-ckeditor5 when I click in the textarea from ckeditor:

ckeditor.tsx:169 TypeError: Cannot read properties of undefined (reading '_source')
at new _Rect (rect.js:52:27)
at getelementsintersectionrect.js:21:32
at Array.map ()
at getElementsIntersectionRect (getelementsintersectionrect.js:18:35)
at StickyPanelView.checkIfShouldBeSticky (stickypanelview.js:116:38)
at StickyPanelView. (stickypanelview.js:97:18)
at StickyPanelView.fire (emittermixin.js:146:47)
at StickyPanelView.set [as isActive] (observablemixin.js:72:30)
at updateBoundObservableProperty (observablemixin.js:548:32)
at observablemixin.js:574:25 {phase: 'runtime', willEditorRestart: true}

Build/ckeditor/ckeditor.ts

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Bold } from '@ckeditor/ckeditor5-basic-styles';

export default class ClassicEditor extends ClassicEditorBase { }

ClassicEditor.builtinPlugins = [
    Bold,
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'bold',
        ],
    },
    language: 'en'
};

vite.config.ts

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import * as path from 'path';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.tsx',
      refresh: true,
    }),
    react(),
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(__dirname, './resources/images'),
          dest: '../',
        },
        {
          src: path.resolve(__dirname, './resources/fonts'),
          dest: '../',
        },
      ],
    }),
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
    },
  },
  build: {
    chunkSizeWarningLimit: 1000
  },
  define: {
    // By default, Vite doesn't include shims for NodeJS/
    // necessary for segment analytics lib to work
    global: {},
  },
});

post.ts

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@/Build/ckeditor/ckeditor';

<CKEditor
  id="post-content"
  editor={ClassicEditor}
  data={translation.content}
  /* onChange={(event, editor: any) => {
      updateWysiwyg('content', editor.getData(), indexTranslation);
  }} */
 />

I use:

• [email protected]

• [email protected]

• @ckeditor/[email protected]

• @ckeditor/[email protected]

• @ckeditor/[email protected]

• @ckeditor/[email protected]

• node v16.20.2

• npm 8.19.4

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "rootDir": "./resources/js",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "@/*": ["./resources/js/*"]
    },
    "types": [
        "node",
        "vite/client",
    ]
  }
}

Language support

Hello,

Any updates on when CKEditor with Vite will support additional languages?

ReferenceError: global is not defined

Hi,

I follow this guide https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-vite.html but I have an error when I click in ckeditor:

ckeditor.tsx:169 ReferenceError: global is not defined

I updated the vite config:

define: {
    // Some libraries use the global object, even though it doesn't exist in the browser.
    // Alternatively, we could add `<script>window.global = window;</script>` to index.html.
    // https://github.com/vitejs/vite/discussions/5912
    global: {},
  },

but after I have an other error:

TypeError: Cannot read properties of undefined (reading '_source')

I have no erro when I import import ClassicEditor from '@ckeditor/ckeditor5-build-classic';.

I created a POC to help debug : https://github.com/jechazelle/ckeditor-poc

ckeditor.ts

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    language: 'en'
};

packages.json

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@prettier/plugin-php": "^0.18.9",
    "@tailwindcss/forms": "^0.5.4",
    "@tailwindcss/typography": "^0.5.9",
    "@types/lodash": "^4.14.197",
    "@types/node": "^20.5.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/ziggy-js": "^1.3.2",
    "@vitejs/plugin-react": "^2.2.0",
    "autoprefixer": "^10.4.15",
    "axios": "^0.26.1",
    "laravel-vite-plugin": "^0.7.8",
    "postcss": "^8.4.27",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.3",
    "typescript": "^4.9.5",
    "vite": "^3.2.7"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-autoformat": "^39.0.1",
    "@ckeditor/ckeditor5-basic-styles": "^39.0.1",
    "@ckeditor/ckeditor5-block-quote": "^39.0.1",
    "@ckeditor/ckeditor5-build-classic": "^39.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^39.0.1",
    "@ckeditor/ckeditor5-essentials": "^39.0.1",
    "@ckeditor/ckeditor5-heading": "^39.0.1",
    "@ckeditor/ckeditor5-link": "^39.0.1",
    "@ckeditor/ckeditor5-list": "^39.0.1",
    "@ckeditor/ckeditor5-paragraph": "^39.0.1",
    "@ckeditor/ckeditor5-react": "^6.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^39.0.1",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
    "@headlessui/react": "^1.7.16",
    "@inertiajs/core": "^1.0.10",
    "@inertiajs/react": "^1.0.10",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ziggy-js": "^1.6.1"
  },
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "avoid"
  }
}

versions:

• node v18.16.0
• npm v9.8.1

[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly

i use ckeditor 5 in nuxt 3, when run build it have a warn like that, please help me.

Support Source Maps

Using this plugin with vite, logs the following warning when running vite build

Sourcemap is likely to be incorrect: a plugin (vite-ckeditor5-styles-loader) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

More info

• https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types
• https://github.com/ckeditor/vite-plugin-ckeditor5/blob/master/src/loaders/stylesLoader.ts#L61-L63

Warnings about missing css map files

Steps

1. Start Vite application in dev mode with CKEditor 5 built from source with vite-plugin-ckeditor5.
2. Open dev tools.

Result

A lot of warnings with the message:

DevTools failed to load source map: Could not load content for http://localhost:5173/Users/lukaszgudel/CKSource/ckeditor5/vite-plugin-ckeditor5/playground/vanilla-sample/node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE