Skip to content

Commit

Permalink
Merge stable into master
Browse files Browse the repository at this point in the history
  • Loading branch information
CKTravisBot committed Jun 16, 2023
2 parents 377c53a + dcc0d53 commit dca0ee5
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/installation/integrations/css.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
menu-title: CSS frameworks
category: integrations
order: 60
order: 80
---

# Compatibility with CSS frameworks
Expand Down
97 changes: 97 additions & 0 deletions docs/installation/integrations/dotnet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
---
category: integrations
order: 70
menu-title: .NET
---

# Compatibility with .NET

As a pure JavaScript/TypeScript application, 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 build of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).

To integrate CKEditor 5 with .NET, we will create a custom CKEditor 5 build using the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then import it into the .NET project.

## Preparing a build

In this guide, we will use the [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a web interface that lets you create a custom build of CKEditor 5 and download the code as a zip package.

The online builder is a powerful tool that lets you effortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, and plugins, configure the toolbar, and choose the UI language for your editor.

You can learn more about creating custom CKEditor 5 builds with the online builder in our {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder Customized installation} guide.

## Setting up the project

For the purpose of this guide, we will use a basic ASP.NET Core project created with `dotnet new webapp`. You can refer to the [ASP.NET Core documentation](https://learn.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-7.0) to learn how to set up a project in the framework.

Once the project has been prepared, create an `assets/vendor` directory in the existing `wwwroot` directory in your app. Your folder structure should resemble this one:

````
├── bin
├── obj
├── Pages
├── Properties
├── wwwroot
│ ├── assets
| └── vendor
│ ├── css
│ ├── js
│ ├── lib
│ └── favicon.ico
├── appsettings.Development.json
├── appsettings.json
└── ...
````

## Integrating the build in your .NET project

Once you have your custom editor build ready and the .NET project has been set up, extract the `.zip` folder obtained from the online builder and place it in the `assets/vendor` directory created in the previous step. Your folder structure should now look like this:

````
├── bin
├── obj
├── Pages
├── Properties
├── wwwroot
│ ├── assets
| ├── vendor
| └── ckeditor5
│ ├── css
│ ├── js
│ ├── lib
│ └── favicon.ico
├── appsettings.Development.json
├── appsettings.json
└── ...
````

<info-box>
Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`.
</info-box>

Then, modify the `Index.cshtml` file contained in the `Pages` directory to include the CKEditor 5 script. You can use this HTML boilerplate as a starting point:

```html
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
<h1>Welcome to CKEditor 5 in .NET</h1>
<div id="editor"></div>
<script src="assets/vendor/ckeditor5/build/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</div>
```

<info-box>
In the snippet above, `ClassicEditor` is referenced, since that is the editor type that was chosen during the build process. If you are using a different editor type, you will have to alter the snippet accordingly.
</info-box>

Finally, in the root directory of your .NET project, run `dotnet watch run` to see the app in action.
100 changes: 100 additions & 0 deletions docs/installation/integrations/laravel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
category: integrations
order: 60
menu-title: Laravel
---

# Compatibility with Laravel

As a pure JavaScript/TypeScript application, 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 build of CKEditor 5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).

To integrate CKEditor 5 with Laravel, we will create a custom CKEditor 5 build using the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then import it into the Laravel project.

## Preparing a build

In this guide, we will use the [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a web interface that lets you create a custom build of CKEditor 5 and download the code as a zip package.

The online builder is a powerful tool that lets you effortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, and plugins, configure the toolbar, and choose the UI language for your editor.

You can learn more about creating custom builds of CKEditor 5 with the online builder in our {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder Customized installation} guide.

## Setting up the project

For the purpose of this guide, we will use a basic Laravel project created with [Composer](https://getcomposer.org/). You can refer to the [Laravel documentation](https://laravel.com/docs/10.x/installation) to learn how to set up a project in the framework.

Once the project has been prepared, create an `assets/vendor` directory in the existing `public` directory in your app. Your folder structure should resemble this one:

````
├── app
├── bootstrap
├── config
├── database
├── public
│ ├── assets
| └── vendor
│ ├── .htaccess
│ ├── favicon.ico
│ ├── index.php
│ ├── robots.txt
│ └── webpack.config.js
├── resources
├── routes
└── ...
````

## Integrating the build in your Laravel project

Once you have your custom editor build ready and the Laravel project has been set up, extract the `.zip` folder obtained from the online builder and place it in the `assets/vendor` directory created in the previous step. Your folder structure should now look like this:

````
├── app
├── bootstrap
├── config
├── database
├── public
│ ├── assets
| ├── vendor
| └── ckeditor5
│ ├── .htaccess
│ ├── favicon.ico
│ ├── index.php
│ ├── robots.txt
│ └── webpack.config.js
├── resources
├── routes
└── ...
````

<info-box>
Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`.
</info-box>

Then, modify the `welcome.blade.php` file contained in the `resources/views` directory to include the CKEditor 5 script. You can use this HTML boilerplate as a starting point:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="assets/vendor/ckeditor5/build/ckeditor.js"></script>
<title>CKE5 in Laravel</title>
</head>
<body>
<h1>Welcome to CKEditor 5 in Laravel</h1>
<div id="editor"></div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
```

<info-box>
In the snippet above, `ClassicEditor` is referenced, since that is the editor type that was chosen during the build process. If you are using a different editor type, you will have to alter the snippet accordingly.
</info-box>

Finally, in the root directory of your Laravel project, run `php artisan serve` to see the app in action.
2 changes: 1 addition & 1 deletion docs/installation/integrations/other.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
category: integrations
order: 70
order: 90
menu-title: Other
---

Expand Down

0 comments on commit dca0ee5

Please sign in to comment.