support the vite version in CKEditor 5 Online Builder

[sdlddr]

📝 Provide a description of the improvement

Support a vite version in CKEditor 5 Online Custom Builder, which can work in vite application. thank you.

📃 Other details

• Browser: webkit
• OS: win11
• CKEditor version: 35.4.0
• Installed CKEditor plugins: custom build

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Reinmar]

Could you elaborate a bit more what do you mean by that? 

Make sure to also check https://github.com/ckeditor/ckeditor5/issues/9807#issuecomment-1363284224.

[LukaszGudel]

Hi @sdlddr!

Currently, our CKEditor 5 Online Builder outputs only editors and samples supported by Webpack, but the editor file in build folder can be used in Vite applications without any additional changes. Do you have problems using the already-built editor from CKEditor5 Online Builder in your Vite application?

As it comes to building the editor from source using Vite, we recently released the first version of a Vite plugin. More details here: https://github.com/ckeditor/ckeditor5/issues/9807#issuecomment-1363284224

You can migrate the downloaded sample from Online Builder to Vite. Please refer to README in plugin repo and to our vanilla sample. In short, to migrate the Online Builder project from Webpack to Vite, the following steps should be made:

• remove all non ckeditor5 packages from devDependencies in package.json (webpack, postcss etc.) - they will not be needed
• also remove @ckeditor/ckeditor5-dev-* packages
• install vite and @ckeditor/vite-plugin-ckeditor5 package
• remove webpack.config.js file and create vite.config.js file - check readme, samples and Vite documentation for more details about the config
• import editor from src/ckeditor.js in index.html file
• add dev and build scripts to package.json with vite dev and vite build commands

There could be some minor issues with importing modules. In that case, you can set "type": "module" in package.json and also set type="module" as an attribute in script tags.

I hope you will find the above information useful.

[sdlddr]

你好@sdlddr！

目前我们的 CKEditor 5 Online Builder 只输出 Webpack 支持的编辑器和示例，但文件build夹中的编辑器文件可以在 Vite 应用程序中使用，无需额外更改。您在 Vite 应用程序中使用 CKEditor5 Online Builder 中已构建的编辑器时遇到问题吗？

关于使用 Vite 从源代码构建编辑器，我们最近发布了第一个版本的 Vite 插件。更多细节在这里：#9807（评论）

您可以将下载的示例从 Online Builder 迁移到 Vite。请参考插件库中的README和我们的 vanilla 示例。简而言之，将 Online Builder 项目从 Webpack 迁移到 Vite，应该进行以下步骤：

• 从 package.json 中的 devDependencies 中删除所有非 ckeditor5 包（webpack、postcss 等）——它们将不再需要
• 也删除@ckeditor/ckeditor5-dev-*包
• 安装打包vite_@ckeditor/vite-plugin-ckeditor5
• 删除webpack.config.js文件和创建vite.config.js文件 - 查看自述文件、示例和 Vite 文档以获取有关配置的更多详细信息
• 从文件src/ckeditor.js中导入编辑器index.html
• dev使用and命令将脚本添加到buildpackage.jsonvite dev``vite build

导入模块可能存在一些小问题。在这种情况下，您可以"type": "module"在 package.json 中设置，也可以在标签中设置type="module"为属性。script

我希望你会发现以上信息有用。

I see. Thank you!

[biku1998]

Hey My project is using react + typescript + vite setup. I built the editor using the online tool. Downloaded it and did all the steps mentioned in the docs i.e.

• creating ckeditor5 folder at root level beside src and node_modules
• copy the content of zip, I got from online builder
• doing npm add file:./ckeditor5

But I'm getting the below error when starting the app

Usage

import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build/build/ckeditor";

export default function TextEditor() {
  return (
    <div className="w-full">
      <CKEditor
        editor={Editor}
        data="<p>Hello from CKEditor 5!</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event, editor) => {
          const data = editor.data.get();
          console.log({ event, editor, data });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
        onError={(event, editor) => {
          console.log("Error.", editor);
          console.log("event", event);
        }}
      />
    </div>
  );
}

[Witoso]

@biku1998 your custom build might have a Watchdog in it, in this case there is no default export. Check the ckeditor.ts file's export from the online builder.

[biku1998]

This is what ckeditor.ts looks like

/**
 * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

import { BalloonEditor } from '@ckeditor/ckeditor5-editor-balloon';

import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import {
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';

// You can read more about extending the build with additional plugins in the "Installing plugins" guide.
// See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.

class Editor extends BalloonEditor {
	public static override builtinPlugins = [
		Autoformat,
		BlockQuote,
		BlockToolbar,
		Bold,
		Essentials,
		Heading,
		Image,
		ImageCaption,
		ImageStyle,
		ImageToolbar,
		ImageUpload,
		Indent,
		Italic,
		Link,
		List,
		MediaEmbed,
		Paragraph,
		Table,
		TableToolbar,
		TextTransformation
	];

	public static override defaultConfig = {
		toolbar: {
			items: [
				'bold',
				'italic',
				'link',
				'numberedList',
				'bulletedList',
				'insertTable',
				'mediaEmbed'
			]
		},
		language: 'en',
		blockToolbar: [
			'undo',
			'redo',
			'heading',
			'blockQuote',
			'imageUpload',
			'indent',
			'outdent'
		],
		image: {
			toolbar: [
				'imageTextAlternative',
				'toggleImageCaption',
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		}
	};
}

export default Editor;

[Witoso]

@biku1998 could you check this solution? https://github.com/ckeditor/ckeditor5/issues/9807#issuecomment-1755980661

[biku1998]

Yes ☝️ works. Thanks a lot @Witoso

[MohamedKarrab]

@biku1998 could you check this solution? #9807 (comment)

I had the same problem and this helped. Thanks, though why does this work and the official docs not work ? we need an update. https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react/react.html#vite

[Reinmar]

I suppose this is resolved with the launch of the new Builder (https://ckeditor.com/ckeditor-5/builder/) and the New Installation Methods (#15502)