From 5859139f7614186e527dc352e109a2beafe95ccd Mon Sep 17 00:00:00 2001 From: mabryl Date: Fri, 2 Jun 2023 11:01:08 +0200 Subject: [PATCH 1/6] Add documentation articles for Laravel and .NET --- docs/installation/integrations/dotnet.md | 87 ++++++++++++++++++++++ docs/installation/integrations/laravel.md | 90 +++++++++++++++++++++++ docs/installation/integrations/other.md | 2 +- 3 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 docs/installation/integrations/dotnet.md create mode 100644 docs/installation/integrations/laravel.md diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md new file mode 100644 index 00000000000..dd2fef85ebb --- /dev/null +++ b/docs/installation/integrations/dotnet.md @@ -0,0 +1,87 @@ +--- +category: integrations +order: 80 +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 CKE5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/). + +The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. + +## Preparing a build + +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, plugins, configure the toolbar, and choose the UI language for your editor. + +You can learn more about creating custom builds of CKE5 via 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 build of the editor 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 +└── ... +```` + +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: + +```` +@page +@model IndexModel +@{ + ViewData["Title"] = "Home page"; +} + +
+

Welcome to CKEditor 5 in .NET

+
+ + +
+```` + +Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. \ No newline at end of file diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md new file mode 100644 index 00000000000..68b1ab3eec0 --- /dev/null +++ b/docs/installation/integrations/laravel.md @@ -0,0 +1,90 @@ +--- +category: integrations +order: 70 +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 CKE5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/). + +The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your Laravel project. + +## Preparing a build + +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, plugins, configure the toolbar, and choose the UI language for your editor. + +You can learn more about creating custom builds of CKE5 via 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 build of the editor 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 +└── ... +```` + +Then, modify the `welcome.blade.php` file contained in `resources/views` to include the CKEditor 5 script. You can use this HTML boilerplate as a starting point: + +```` + + + + + + CKE5 in Laravel + + +

Welcome to CKEditor 5 in Laravel

+
+ + + +```` + +Finally, in the root of your Laravel project, run `php artisan serve` to see the app in action. diff --git a/docs/installation/integrations/other.md b/docs/installation/integrations/other.md index 2a98ad75e18..ba676d25671 100644 --- a/docs/installation/integrations/other.md +++ b/docs/installation/integrations/other.md @@ -1,6 +1,6 @@ --- category: integrations -order: 70 +order: 90 menu-title: Other --- From 99f0f0abcfa32cfef7ea57bd2520a97c6e88de19 Mon Sep 17 00:00:00 2001 From: godai78 Date: Mon, 5 Jun 2023 14:16:35 +0200 Subject: [PATCH 2/6] Docs: a review. --- docs/installation/integrations/dotnet.md | 14 +++++++------- docs/installation/integrations/laravel.md | 16 ++++++++-------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md index dd2fef85ebb..17227c6dbef 100644 --- a/docs/installation/integrations/dotnet.md +++ b/docs/installation/integrations/dotnet.md @@ -6,15 +6,15 @@ 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 CKE5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/). +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/). -The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. +The core of the integration is preparing a custom CKEditor 5 build with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. ## Preparing a build -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, plugins, configure the toolbar, and choose the UI language for your editor. +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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 CKE5 via the online builder in our {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder Customized installation guide}. +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 @@ -41,7 +41,7 @@ Once the project has been prepared, create an `assets/vendor` directory in the e ## Integrating the build in your .NET project -Once you have your custom build of the editor 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: +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 @@ -63,7 +63,7 @@ Once you have your custom build of the editor ready, and the .NET project has be 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 @{ @@ -82,6 +82,6 @@ Then, modify the `Index.cshtml` file contained in the `Pages` directory to inclu } ); -```` +``` Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. \ No newline at end of file diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md index 68b1ab3eec0..6a2f332d709 100644 --- a/docs/installation/integrations/laravel.md +++ b/docs/installation/integrations/laravel.md @@ -6,15 +6,15 @@ 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 CKE5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/). +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/). The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your Laravel project. ## Preparing a build -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, plugins, configure the toolbar, and choose the UI language for your editor. +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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 CKE5 via the online builder in our {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder Customized installation guide}. +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 @@ -42,7 +42,7 @@ Once the project has been prepared, create an `assets/vendor` directory in the e ## Integrating the build in your Laravel project -Once you have your custom build of the editor 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: +Once you have your custom build of the editor 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 @@ -63,9 +63,9 @@ Once you have your custom build of the editor ready, and the Laravel project has └── ... ```` -Then, modify the `welcome.blade.php` file contained in `resources/views` to include the CKEditor 5 script. You can use this HTML boilerplate as a starting point: +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 @@ -85,6 +85,6 @@ Then, modify the `welcome.blade.php` file contained in `resources/views` to incl -```` +``` -Finally, in the root of your Laravel project, run `php artisan serve` to see the app in action. +Finally, in the root directory of your Laravel project, run `php artisan serve` to see the app in action. From add415df4bc55bc7b5e8795e630c4fb2dbcb049b Mon Sep 17 00:00:00 2001 From: mabryl Date: Mon, 12 Jun 2023 14:33:54 +0200 Subject: [PATCH 3/6] Clarify some integration steps --- docs/installation/integrations/dotnet.md | 24 +++++++++++++++-------- docs/installation/integrations/laravel.md | 8 ++++++++ 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md index 17227c6dbef..92f6506fe78 100644 --- a/docs/installation/integrations/dotnet.md +++ b/docs/installation/integrations/dotnet.md @@ -6,15 +6,15 @@ 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/). +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 CKE5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/). -The core of the integration is preparing a custom CKEditor 5 build with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. +The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. ## Preparing a build -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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. +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, 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. +You can learn more about creating custom builds of CKE5 via 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 @@ -41,7 +41,7 @@ Once the project has been prepared, create an `assets/vendor` directory in the e ## 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: +Once you have your custom build of the editor 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 @@ -61,9 +61,13 @@ Once you have your custom editor build ready and the .NET project has been set u └── ... ```` + + Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. + + 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 @{ @@ -82,6 +86,10 @@ Then, modify the `Index.cshtml` file contained in the `Pages` directory to inclu } ); -``` +```` + + + 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. + -Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. \ No newline at end of file +Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md index 6a2f332d709..27a32a0e22e 100644 --- a/docs/installation/integrations/laravel.md +++ b/docs/installation/integrations/laravel.md @@ -63,6 +63,10 @@ Once you have your custom build of the editor ready and the Laravel project has └── ... ```` + + Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. + + 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 @@ -87,4 +91,8 @@ Then, modify the `welcome.blade.php` file contained in the `resources/views` dir ``` + + 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. + + Finally, in the root directory of your Laravel project, run `php artisan serve` to see the app in action. From 80f34adfd830c34aec1a80e9a04c8d6d0289878c Mon Sep 17 00:00:00 2001 From: mabryl Date: Mon, 12 Jun 2023 14:39:37 +0200 Subject: [PATCH 4/6] Revert "Clarify some integration steps" This reverts commit add415df4bc55bc7b5e8795e630c4fb2dbcb049b. --- docs/installation/integrations/dotnet.md | 24 ++++++++--------------- docs/installation/integrations/laravel.md | 8 -------- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md index 92f6506fe78..17227c6dbef 100644 --- a/docs/installation/integrations/dotnet.md +++ b/docs/installation/integrations/dotnet.md @@ -6,15 +6,15 @@ 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 CKE5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/). +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/). -The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. +The core of the integration is preparing a custom CKEditor 5 build with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. ## Preparing a build -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a powerful tool that lets you efortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, plugins, configure the toolbar, and choose the UI language for your editor. +The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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 CKE5 via the online builder in our {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder Customized installation guide}. +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 @@ -41,7 +41,7 @@ Once the project has been prepared, create an `assets/vendor` directory in the e ## Integrating the build in your .NET project -Once you have your custom build of the editor 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: +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 @@ -61,13 +61,9 @@ Once you have your custom build of the editor ready, and the .NET project has be └── ... ```` - - Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. - - 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 @{ @@ -86,10 +82,6 @@ Then, modify the `Index.cshtml` file contained in the `Pages` directory to inclu } ); -```` - - - 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. - +``` -Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. +Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. \ No newline at end of file diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md index 27a32a0e22e..6a2f332d709 100644 --- a/docs/installation/integrations/laravel.md +++ b/docs/installation/integrations/laravel.md @@ -63,10 +63,6 @@ Once you have your custom build of the editor ready and the Laravel project has └── ... ```` - - Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. - - 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 @@ -91,8 +87,4 @@ Then, modify the `welcome.blade.php` file contained in the `resources/views` dir ``` - - 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. - - Finally, in the root directory of your Laravel project, run `php artisan serve` to see the app in action. From 1b009293ad7638b1b49eac37a919897deabf5be4 Mon Sep 17 00:00:00 2001 From: mabryl Date: Mon, 12 Jun 2023 14:45:55 +0200 Subject: [PATCH 5/6] Revert to include Bartek's review changes and clarify integration steps --- docs/installation/integrations/dotnet.md | 10 +++++++++- docs/installation/integrations/laravel.md | 8 ++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md index 17227c6dbef..7d4363eadae 100644 --- a/docs/installation/integrations/dotnet.md +++ b/docs/installation/integrations/dotnet.md @@ -61,6 +61,10 @@ Once you have your custom editor build ready and the .NET project has been set u └── ... ```` + + Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. + + 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 @@ -84,4 +88,8 @@ Then, modify the `Index.cshtml` file contained in the `Pages` directory to inclu ``` -Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. \ No newline at end of file + + 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. + + +Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md index 6a2f332d709..27a32a0e22e 100644 --- a/docs/installation/integrations/laravel.md +++ b/docs/installation/integrations/laravel.md @@ -63,6 +63,10 @@ Once you have your custom build of the editor ready and the Laravel project has └── ... ```` + + Note that the name of the original `.zip` folder from the online builder has been shortened here to `ckeditor5`. + + 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 @@ -87,4 +91,8 @@ Then, modify the `welcome.blade.php` file contained in the `resources/views` dir ``` + + 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. + + Finally, in the root directory of your Laravel project, run `php artisan serve` to see the app in action. From 46980715072ebb9bca0e267fc63fa42d95940a84 Mon Sep 17 00:00:00 2001 From: mabryl Date: Wed, 14 Jun 2023 13:17:25 +0200 Subject: [PATCH 6/6] Introduce changes after review --- docs/installation/integrations/css.md | 2 +- docs/installation/integrations/dotnet.md | 10 ++++++---- docs/installation/integrations/laravel.md | 10 ++++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/installation/integrations/css.md b/docs/installation/integrations/css.md index 4cbb593fa06..dd637895e62 100644 --- a/docs/installation/integrations/css.md +++ b/docs/installation/integrations/css.md @@ -1,7 +1,7 @@ --- menu-title: CSS frameworks category: integrations -order: 60 +order: 80 --- # Compatibility with CSS frameworks diff --git a/docs/installation/integrations/dotnet.md b/docs/installation/integrations/dotnet.md index 7d4363eadae..132fc4eb758 100644 --- a/docs/installation/integrations/dotnet.md +++ b/docs/installation/integrations/dotnet.md @@ -1,6 +1,6 @@ --- category: integrations -order: 80 +order: 70 menu-title: .NET --- @@ -8,11 +8,13 @@ menu-title: .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/). -The core of the integration is preparing a custom CKEditor 5 build with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your .NET project. +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 -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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. +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. @@ -92,4 +94,4 @@ Then, modify the `Index.cshtml` file contained in the `Pages` directory to inclu 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. -Finally, in the root of your .NET project, run `dotnet watch run` to see the app in action. +Finally, in the root directory of your .NET project, run `dotnet watch run` to see the app in action. diff --git a/docs/installation/integrations/laravel.md b/docs/installation/integrations/laravel.md index 27a32a0e22e..fc6afab28e6 100644 --- a/docs/installation/integrations/laravel.md +++ b/docs/installation/integrations/laravel.md @@ -1,6 +1,6 @@ --- category: integrations -order: 70 +order: 60 menu-title: Laravel --- @@ -8,11 +8,13 @@ menu-title: 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/). -The core of the integration is preparing a build of CKEditor 5 with the [online builder](https://ckeditor.com/ckeditor-5/online-builder/), and then importing it into your Laravel project. +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 -The easiest way of preparing a custom build of CKEditor 5 is to use our [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It 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. +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. @@ -42,7 +44,7 @@ Once the project has been prepared, create an `assets/vendor` directory in the e ## Integrating the build in your Laravel project -Once you have your custom build of the editor 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: +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