diff --git a/docs/_snippets/getting-started/use-builder.html b/docs/_snippets/getting-started/use-builder.html new file mode 100644 index 00000000000..5d366b4efcc --- /dev/null +++ b/docs/_snippets/getting-started/use-builder.html @@ -0,0 +1,72 @@ +
+

CKEditor 5 Builder

+ +

+ In our interactive Builder you can quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: +

+ + + +

At the end you get ready-to-use code tailored to your needs!

+ +

+ Check out our interactive Builder +

+
+ + diff --git a/docs/_snippets/getting-started/use-builder.js b/docs/_snippets/getting-started/use-builder.js new file mode 100644 index 00000000000..273e4c9b82d --- /dev/null +++ b/docs/_snippets/getting-started/use-builder.js @@ -0,0 +1,4 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ diff --git a/docs/getting-started/integrations/angular.md b/docs/getting-started/integrations/angular.md index ebab5a01772..8f12f272361 100644 --- a/docs/getting-started/integrations/angular.md +++ b/docs/getting-started/integrations/angular.md @@ -90,17 +90,9 @@ Because of the breaking changes in the Angular library output format, the `@cked All available Angular versions are [listed on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular), where they can be pulled from. -## Quick start - -### Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your Angular application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: +{@snippet getting-started/use-builder} -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +## Quick start ### Setting up the project diff --git a/docs/getting-started/integrations/dotnet.md b/docs/getting-started/integrations/dotnet.md index a49bfd8d878..fdd51352421 100644 --- a/docs/getting-started/integrations/dotnet.md +++ b/docs/getting-started/integrations/dotnet.md @@ -9,15 +9,7 @@ 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 configuration of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/). -## Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your .NET project is preparing an editor preset with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and including it into your project. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ## Setting up the project diff --git a/docs/getting-started/integrations/laravel.md b/docs/getting-started/integrations/laravel.md index 7fc46d24198..189ff304451 100644 --- a/docs/getting-started/integrations/laravel.md +++ b/docs/getting-started/integrations/laravel.md @@ -9,15 +9,7 @@ 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 configuration of CKEditor 5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/). -## Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your Laravel project is preparing an editor preset with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=preset) and including it into your project. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ## Setting up the project diff --git a/docs/getting-started/integrations/next-js.md b/docs/getting-started/integrations/next-js.md index be68af80b18..53d3bc3ca44 100644 --- a/docs/getting-started/integrations/next-js.md +++ b/docs/getting-started/integrations/next-js.md @@ -15,15 +15,7 @@ Next.js 13 introduced a new App Router as an alternative to the previous Pages R CKEditor 5 does not support server-side rendering yet, but you can integrate it with the Next.js framework. In this guide, you will add the editor to a Next.js project using both routing paradigms. For this purpose, you will need [Next.js CLI](https://nextjs.org/docs/app/api-reference/create-next-app), and the official {@link getting-started/integrations/react CKEditor 5 React component}. -## Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your Next.js application is configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your project. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! You can take the output from the builder, specifically the npm React snippet, and follow the npm path below. Just replace the content of the `components/custom-editor.js` file. The snippet may contain client-side hooks, so don't forget about adding the `'use client'` directive in the case of the App Router. +{@snippet getting-started/use-builder} ## Setting up the project diff --git a/docs/getting-started/integrations/react.md b/docs/getting-started/integrations/react.md index 8c07875a674..5d3c691d9e0 100644 --- a/docs/getting-started/integrations/react.md +++ b/docs/getting-started/integrations/react.md @@ -23,15 +23,7 @@ React lets you build user interfaces out of individual pieces called components. ## Quick start -### Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your React application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ### Setting up the project diff --git a/docs/getting-started/integrations/vuejs-v2.md b/docs/getting-started/integrations/vuejs-v2.md index f0566986286..5fbeb152c47 100644 --- a/docs/getting-started/integrations/vuejs-v2.md +++ b/docs/getting-started/integrations/vuejs-v2.md @@ -27,15 +27,7 @@ Vue.js is a versatile framework for building web user interfaces. CKEditor  ## Quick start -### Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your Vue application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ### Installing from npm diff --git a/docs/getting-started/integrations/vuejs-v3.md b/docs/getting-started/integrations/vuejs-v3.md index 46fd366c300..11348e760de 100644 --- a/docs/getting-started/integrations/vuejs-v3.md +++ b/docs/getting-started/integrations/vuejs-v3.md @@ -23,15 +23,7 @@ Vue.js is a versatile framework for building web user interfaces. CKEditor  ## Quick start -### Using CKEditor 5 Builder - -The easiest way to use CKEditor 5 in your Vue application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ### Setting up the project diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md index 99a48ce32e4..b1f3d6988d2 100644 --- a/docs/getting-started/quick-start.md +++ b/docs/getting-started/quick-start.md @@ -13,22 +13,13 @@ CKEditor 5 is a powerful, rich text editor you can embed in your web applic You have a few methods to choose from: -* [Using CKEditor 5 Builder](#using-ckeditor-5-builder) for the smoothest setup with live preview and multiple integration options. +* [Using CKEditor 5 Builder](#ckeditor-5-builder) for the smoothest setup with live preview and multiple integration options. * [Using npm](#installing-ckeditor-5-using-npm), where you use a JavaScript package and build the editor with a bundler. * [Using CDN](#installing-ckeditor-5-from-cdn), where you use our cloud-distributed CDN in a no-build setup. * [Using a ZIP file](#installing-ckeditor-5-from-a-zip-file), where you download the ready-to-run files and copy them to your project. * Choosing one of the pre-made integrations with popular frameworks (see table of contents for details). -## Using CKEditor 5 Builder - -Check out our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs) to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select: - -* editor type, -* the features you need, -* the preferred framework (React, Angular, Vue or Vanilla JS), -* the preferred distribution method. - -You get ready-to-use code tailored to your needs! +{@snippet getting-started/use-builder} ## Installing CKEditor 5 using npm