Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/getting-started/integrations-cdn/dotnet.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
category: cloud
meta-title: Using CKEditor 5 with .NET from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with .NET using CDN.
meta-title: Using the CKEditor 5 WYSIWYG editor with .NET from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with .NET using CDN. Follow step-by-step instructions for fast installation and setup.
order: 90
menu-title: .NET
---

# Integrating CKEditor 5 with .NET from CDN

As a pure JavaScript/TypeScript library, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).
As a pure JavaScript/TypeScript library, the CKEditor 5 HTML editor will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).

{@snippet getting-started/use-builder}

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations-cdn/laravel.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
category: cloud
meta-title: Using CKEditor 5 with Laravel from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Laravel using CDN.
meta-title: Using the CKEditor 5 rich-text editor with Laravel from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Laravel using CDN. Follow step-by-step instructions for fast installation and setup.
order: 80
menu-title: Laravel
---

# Integrating CKEditor 5 with Laravel from CDN

As a pure JavaScript/TypeScript library, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).
As a pure JavaScript/TypeScript library, the CKEditor 5 HTML editor will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).

{@snippet getting-started/use-builder}

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations-cdn/next-js.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Next.js
meta-title: Using CKEditor 5 with Next.js from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with the Next.js framework using both routing strategies (App Router or Pages Router) and CDN.
meta-title: Using the CKEditor 5 rich-text editor with Next.js from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with the Next.js framework using both routing strategies (App Router or Pages Router) and CDN.
category: cloud
order: 40
modified_at: 2023-11-14
Expand Down Expand Up @@ -88,7 +88,7 @@ export default CustomEditor;

The `CustomEditor` component is ready to be used inside a page. The page's directory will differ depending on the selected routing strategy.

CKEditor 5 is a client-side text editor and relies on the browser APIs, so you need to disable server-side rendering for our custom component. You can lazily load the component using the `dynamic()` function built into Next.js.
The CKEditor 5 HTML editor is a client-side text editor and relies on the browser APIs, so you need to disable server-side rendering for our custom component. You can lazily load the component using the `dynamic()` function built into Next.js.

Prepare a wrapper for the `CustomEditor` component to load it on the client side.

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations-cdn/nuxt.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Nuxt
meta-title: Using CKEditor 5 with Nuxt from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with the Nuxt framework using CDN.
meta-title: Using the CKEditor 5 rich-text editor with Nuxt from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with the Nuxt framework using CDN. Follow step-by-step instructions for fast installation and setup.
category: cloud
order: 50
modified_at: 2025-03-13
Expand All @@ -11,7 +11,7 @@ modified_at: 2025-03-13

[Nuxt](https://nuxt.com/) is a Vue.js meta-framework for creating full-stack web applications. It offers everything you would expect from a modern framework, including various rendering modes, file-based routing, automatic code splitting, a large ecosystem of plugins and hosting integrations, and more.

CKEditor 5 does not support server-side rendering, but you can integrate it with the Nuxt framework. In this guide, you will add the editor to a Nuxt project. For this purpose, you will need a [Nuxt project](https://nuxt.com/docs/getting-started/installation) and the official {@link getting-started/integrations/vuejs-v3 CKEditor 5 Vue component}.
The CKEditor 5 HTML editor does not support server-side rendering, but you can integrate it with the Nuxt framework. In this guide, you will add the editor to a Nuxt project. For this purpose, you will need a [Nuxt project](https://nuxt.com/docs/getting-started/installation) and the official {@link getting-started/integrations/vuejs-v3 CKEditor 5 Vue component}.

{@snippet getting-started/use-builder}

Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/integrations-cdn/quick-start.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Vanilla JS
meta-title: Vanilla JS CKEditor 5 installation - quick start from CDN | CKEditor 5 Documentation
meta-description: Install, integrate, and configure CKEditor 5 using Vanilla JS with CDN.
meta-description: Install, integrate, and configure CKEditor 5 using Vanilla JS with CDN. Follow step-by-step instructions for fast installation and setup.
category: cloud
order: 20
---
Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations-cdn/salesforce.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Salesforce
meta-title: Using CKEditor 5 with Salesforce from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Salesforce and CKEditor 5 CDN
meta-title: Using the CKEditor 5 rich-text editor with Salesforce from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Salesforce and CKEditor 5 CDN. Follow step-by-step instructions for fast installation and setup.
category: cloud
order: 110
modified_at: 2025-04-04
Expand All @@ -20,7 +20,7 @@ This section assumes you are working within the [Salesforce development platform
## Creating a Visualforce page

<info-box>
The Visualforce page with CKEditor&nbsp;5 will be displayed in an iframe after embedding it in your Lightning page.
The Visualforce page with the CKEditor&nbsp;5 HTML editor will be displayed in an iframe after embedding it in your Lightning page.
</info-box>

To start the integration, you need to create a new Visualforce page that will be used for the CKEditor&nbsp;5 integration. Navigate to the *Setup* page of your development platform and use the search input to find *Visualforce pages*.
Expand Down
8 changes: 4 additions & 4 deletions docs/getting-started/integrations-cdn/spring-boot.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
category: cloud
meta-title: Using CKEditor 5 with Spring Boot from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Spring Boot using CDN.
meta-title: Using the CKEditor 5 WYSIWYG editor with Spring Boot from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with Spring Boot using CDN. Follow step-by-step instructions for fast installation and setup.
order: 130
menu-title: Spring Boot
modified_at: 2025-05-06
---

# Integrating CKEditor&nbsp;5 with Spring Boot from CDN

As a pure JavaScript/TypeScript library, CKEditor&nbsp;5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, the Java-based [Spring Boot](https://spring.io/projects/spring-boot).
As a pure JavaScript/TypeScript library, CKEditor&nbsp;5 rich-text editor will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, the Java-based [Spring Boot](https://spring.io/projects/spring-boot).

{@snippet getting-started/use-builder}

Expand Down Expand Up @@ -192,7 +192,7 @@ Now, we need to put our script in the previous template. We need to put the scri
</html>
```

To make this work with Spring Boot, you need to create a controller to serve the HTML page. Create a file named `HomeController.java` in your project's main package:
To make the HTML editor work with Spring Boot, you need to create a controller to serve the HTML page. Create a file named `HomeController.java` in your project's main package:

```java
package com.example.demo;
Expand Down
8 changes: 4 additions & 4 deletions docs/getting-started/integrations-cdn/svelte.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
menu-title: Svelte
meta-title: Using CKEditor 5 with Svelte from CDN | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Svelte using CDN
meta-title: Using the CKEditor 5 WYSIWYG editor with Svelte from CDN | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with Svelte using CDN. Follow step-by-step instructions for fast installation and setup.
category: cloud
order: 110
modified_at: 2025-04-24
---

# Integrating CKEditor&nbsp;5 with Svelte from CDN

[Svelte](https://svelte.dev/) is a modern JavaScript compiler that builds highly optimized, reactive web applications. Unlike traditional frameworks, Svelte shifts most of the work from runtime to build time, resulting in highly efficient applications. CKEditor&nbsp;5 can be easily integrated with Svelte applications, providing powerful rich text editing capabilities to your projects.
[Svelte](https://svelte.dev/) is a modern JavaScript compiler that builds highly optimized, reactive web applications. Unlike traditional frameworks, Svelte shifts most of the work from runtime to build time, resulting in highly efficient applications. CKEditor&nbsp;5 rich-text editor can be easily integrated with Svelte applications, providing powerful rich text editing capabilities to your projects.

{@snippet getting-started/use-builder}

Expand Down Expand Up @@ -171,7 +171,7 @@ npm run dev

### Component structure

The Svelte integration follows these key steps:
The Svelte HTML editor integration follows these key steps:

1. **Static loading**: CKEditor 5 scripts and styles are loaded from CDN in the HTML file
2. **Editor initialization**: The editor is created with the specified configuration when the component mounts
Expand Down
8 changes: 4 additions & 4 deletions docs/getting-started/integrations/css.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
menu-title: CSS frameworks
meta-title: Compatibility with CSS frameworks with npm | CKEditor 5 Documentation
meta-description: Install, integrate, and configure CKEditor 5 using CSS frameworks
meta-title: Compatibility of the CKEditor 5 WYSIWYG editor with CSS frameworks with npm | CKEditor 5 Documentation
meta-description: Install, integrate, and configure the CKEditor 5 rich-text editor using CSS frameworks. Follow step-by-step instructions for fast setup.
category: installation
order: 90
---

# Compatibility with CSS frameworks

CKEditor&nbsp;5 is compatible with most of the popular CSS frameworks. However, to properly integrate with some of them, additional tweaks may be necessary. This is mostly because:
CKEditor&nbsp;5 is compatible with most of the popular CSS frameworks. However, to properly integrate our robust HTML editor with some of them, additional tweaks may be necessary. This is mostly because:

* CSS frameworks often use a higher [CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) in their style sheets and override default editor styles, distorting the user interface.
* Modal components of various UI frameworks use high `z-index` values in their styles and render over (cover) the UI of CKEditor&nbsp;5.
* Framework modals use an aggressive focus management policy that breaks the input fields in the rich-text editor (for example, the link input).

In this guide, you will learn how to address these integration issues and use the CKEditor&nbsp;5 WYSIWYG editor with the most popular frontend frameworks.
In this guide, you will learn how to address these integration issues and use the CKEditor&nbsp;5 HTML editor with the most popular frontend frameworks.

{@snippet getting-started/use-builder}

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations/dotnet.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
category: self-hosted
meta-title: Using CKEditor 5 with .NETfrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with .NET using a ZIP archive.
meta-title: Using the CKEditor 5 WYSIWYG editor with .NET from ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with .NET using a ZIP archive. Follow step-by-step instructions for fast installation and setup.
order: 90
menu-title: .NET
---

# Integrating CKEditor&nbsp;5 with .NET from ZIP

As a pure JavaScript/TypeScript application, CKEditor&nbsp;5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).
As a pure JavaScript/TypeScript application, the CKEditor&nbsp;5 HTML editor will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).

{@snippet getting-started/use-builder}

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations/laravel.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
category: self-hosted
meta-title: Using CKEditor 5 with Laravelfrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Laravel using a ZIP archive.
meta-title: Using the CKEditor 5 rich-text editor with Laravel from ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Laravel using a ZIP archive. Follow step-by-step instructions for fast installation and setup.
order: 80
menu-title: Laravel
---

# Integrating CKEditor&nbsp;5 with Laravel from ZIP

As a pure JavaScript/TypeScript application, CKEditor&nbsp;5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).
As a pure JavaScript/TypeScript application, the CKEditor&nbsp;5 HTML editor will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor&nbsp;5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).

{@snippet getting-started/use-builder}

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations/next-js.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Next.js
meta-title: Using CKEditor 5 with Next.jsfrom npm | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with the Next.js framework using both routing strategies (App Router or Pages Router) and npm.
meta-title: Using the CKEditor 5 rich-text editor with Next.js from npm | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with the Next.js framework using both routing strategies (App Router or Pages Router) and npm.
category: self-hosted
order: 40
modified_at: 2023-11-14
Expand Down Expand Up @@ -83,7 +83,7 @@ export default CustomEditor;

The `CustomEditor` component is ready to be used inside a page. The page's directory will differ depending on the chosen routing strategy.

CKEditor&nbsp;5 is a client-side text editor and relies on the browser APIs, so you need to disable server-side rendering for our custom component. You can lazily load the component using the `dynamic()` function built into Next.js.
The CKEditor&nbsp;5 HTML editor is a client-side text editor and relies on the browser APIs, so you need to disable server-side rendering for our custom component. You can lazily load the component using the `dynamic()` function built into Next.js.

Prepare a wrapper for the `CustomEditor` component to load it on the client side.

Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations/nuxt.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Nuxt
meta-title: Using CKEditor 5 with Nuxtfrom npm | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with the Nuxt framework using npm.
meta-title: Using the CKEditor 5 rich-text editor with Nuxt from npm | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with the Nuxt framework using npm. Follow step-by-step instructions for fast installation and setup.
category: self-hosted
order: 50
modified_at: 2025-03-13
Expand All @@ -11,7 +11,7 @@ modified_at: 2025-03-13

[Nuxt](https://nuxt.com/) is a Vue.js meta-framework for creating full-stack web applications. It offers everything you would expect from a modern framework, including various rendering modes, file-based routing, automatic code splitting, a large ecosystem of plugins and hosting integrations, and more.

CKEditor&nbsp;5 does not support server-side rendering, but you can integrate it with the Nuxt framework. In this guide, you will add the editor to a Nuxt project. For this purpose, you will need a [Nuxt project](https://nuxt.com/docs/getting-started/installation) and the official {@link getting-started/integrations/vuejs-v3 CKEditor&nbsp;5 Vue component}.
The CKEditor&nbsp;5 HTML editor does not support server-side rendering, but you can integrate it with the Nuxt framework. In this guide, you will add the editor to a Nuxt project. For this purpose, you will need a [Nuxt project](https://nuxt.com/docs/getting-started/installation) and the official {@link getting-started/integrations/vuejs-v3 CKEditor&nbsp;5 Vue component}.

{@snippet getting-started/use-builder}

Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/integrations/quick-start.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Vanilla JS
meta-title: Vanilla JS CKEditor 5 installation - quick start with npm or ZIP | CKEditor 5 Documentation
meta-description: Install, integrate, and configure CKEditor 5 using npm or ZIP.
meta-description: Install, integrate, and configure CKEditor 5 using npm or ZIP. Follow step-by-step instructions for fast installation and setup.
category: self-hosted
order: 20
---
Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/integrations/salesforce.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: Salesforce
meta-title: Using CKEditor 5 with Salesforcefrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with Salesforce using a ZIP archive
meta-title: Using the CKEditor 5 rich-text editor with Salesforce from ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Salesforce using a ZIP archive. Follow step-by-step instructions for fast installation and setup.
category: self-hosted
order: 100
modified_at: 2025-04-04
Expand All @@ -20,7 +20,7 @@ This section assumes you are working within the [Salesforce development platform
## Creating a Visualforce page

<info-box>
The Visualforce page with CKEditor&nbsp;5 will be displayed in an iframe after embedding it in your Lightning page.
The Visualforce page with the CKEditor&nbsp;5 HTML editor will be displayed in an iframe after embedding it in your Lightning page.
</info-box>

To start the integration, you need to create a new Visualforce page that will be used for the CKEditor&nbsp;5 integration. Navigate to the *Setup* page of your development platform and use the search input to find *Visualforce pages*.
Expand Down
Loading