Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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.
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.
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.
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
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
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.
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
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
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 .NETfrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with .NET using a ZIP archive.
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 Laravelfrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Laravel using a ZIP archive.
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.jsfrom 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 Nuxtfrom npm | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with the Nuxt framework using npm.
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
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 Salesforcefrom ZIP archive | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 WYSIWYG editor with Salesforce using a ZIP archive
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
14 changes: 7 additions & 7 deletions docs/getting-started/integrations/sharepoint.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
menu-title: SharePoint (SPFx)
meta-title: Using CKEditor 5 with with SharePoint SPFx | CKEditor 5 Documentation
meta-description: Integrate CKEditor 5 with SharePoint SPFx using npm
meta-title: Using the CKEditor 5 WYSIWYG editor with with SharePoint SPFx | CKEditor 5 Documentation
meta-description: Integrate the CKEditor 5 rich-text editor with SharePoint SPFx using npm
category: self-hosted
order: 120
modified_at: 2025-04-30
---

# Integrating CKEditor&nbsp;5 with SharePoint SPFx from npm
# Integrating CKEditor&nbsp;5 rich-text editor with SharePoint SPFx from npm

[The SharePoint Framework (SPFx)](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview) is Microsoft's modern, client-side development model for building custom experiences that run in the SharePoint Online, Microsoft Teams, Viva Connections, Outlook, and the Microsoft 365 applications.

## Prerequisites

Before integrating CKEditor&nbsp;5 with SharePoint, make sure you have the following installed:
Before integrating CKEditor&nbsp;5 rich-text editor with SharePoint, make sure you have the following installed:

1. [Node.js](https://nodejs.org/) (LTS version)
2. [Yeoman generator](https://yeoman.io/) and SharePoint generator plugin:
Expand Down Expand Up @@ -164,15 +164,15 @@ gulp serve

### Adding the editor web part on page

You should be now able to add CKEditor&nbsp;5 by clicking the plus icon on the main page:
You should be now able to add CKEditor&nbsp;5 HTML editor to your SharePoint application by clicking the plus icon on the main page:

{@img assets/img/sharepoint-integration_03.png Screenshot of SharePoint application.}

Then choose CKEditor 5 component:
Then choose CKEditor&nbsp;5 component:

{@img assets/img/sharepoint-integration_04.png Screenshot of SharePoint application.}

You should now be able to use the editor:
You should now be able to use the ricz-text editor with SharePoint:

{@img assets/img/sharepoint-integration_05.png Screenshot of SharePoint application.}

Expand Down
Loading