### Install and run starter files

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-3.md

Use these commands to get the starter files for this part of the tutorial and install dependencies.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-2 abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

--------------------------------

### Project Setup and Development Commands

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/using-react-in-a-widget.md

These commands are used to initialize a new project using degit, install dependencies, and start the development server. Ensure you are in the project directory before running these commands.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/react-widget/final-project final-project
cd final-project

npm install
npm run dev
```

--------------------------------

### Install and run starter project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/creating-simple-plugin-timestamp.md

Use these commands to set up the starter project for the timestamp plugin tutorial. This includes installing dependencies and starting the development server.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/timestamp-plugin/starter-files timestamp-plugin
cd timestamp-plugin

npm install
npm run dev
```

--------------------------------

### Install CKEditor 5 Dependencies

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/crash-course/editor.md

Commands to set up the project environment for the CKEditor 5 crash course. This includes cloning an example project, installing npm packages, and starting the development server.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/crash-course crash-course
cd crash-course

npm install
npm run dev
```

--------------------------------

### Set up starter project for React widget

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/using-react-in-a-widget.md

Use these commands to clone the starter project and install dependencies. Then, start the development server to view the initial application.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/react-widget/starter-files react-widget
cd react-widget

npm install
npm run dev
```

--------------------------------

### Setting up the CKEditor 5 Project with External Data Widget

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/data-from-external-source.md

These bash commands guide you through cloning the final project, navigating into the directory, installing dependencies, and starting the development server. This is useful for quickly setting up the environment to see the external data widget in action.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/data-from-external-source/final-project final-project
cd final-project

npm install
npm run dev
```

--------------------------------

### Start an Electron Application

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations/electron.md

Navigate to your application's directory and start the Electron app. Ensure you have followed the Electron Forge setup instructions.

```bash
cd my-app
npm start
```

--------------------------------

### Salesforce Package Installation URL

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations-cdn/salesforce.md

This is an example of a URL used to install a Salesforce package. Ensure you are using a production Salesforce account and have the necessary permissions.

```html
https://login.salesforce.com/packaging/installPackage.apexp?p0=04td20000002WVF&isdtp=p1
```

--------------------------------

### Bootstrap Project with npx

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/data-from-external-source.md

Use these commands to set up the starter project for the data from external source tutorial. This includes installing dependencies and starting the development server.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/data-from-external-source/starter-files data-from-external-source
cd data-from-external-source

npm install
npm run dev
```

--------------------------------

### Install Vite for CDN Setup

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/crash-course/editor.md

Install Vite as a development dependency to manage the build process when adapting the tutorial for CDN usage.

```bash
npm install vite
```

--------------------------------

### Configure SimpleBox Toolbar in Editor Setup

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/implementing-a-block-widget.md

This example demonstrates how to add the `simpleBox.toolbar` configuration to the editor setup in `main.js`, specifying the items for the simple box toolbar.

```javascript
// main.js

import SimpleBox from './simplebox/simplebox';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
		plugins: [
			Essentials, Paragraph, Heading, List, Bold, Italic,
			SimpleBox
		],
		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', 'simpleBox' ],
		// Added toolbar configuration.
		simpleBox: {
			toolbar: [ 'secretSimpleBox' ]
		}
	} );

```

--------------------------------

### Set up CKEditor 5 Block Widget Project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/implementing-a-block-widget.md

Use degit to clone the final project for the block widget tutorial. Install dependencies and start the development server.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/block-widget/final-project final-project
cd final-project

npm install
npm run dev
```

--------------------------------

### Classic Editor Setup

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/examples/builds/classic-editor.md

This snippet shows how to initialize the classic editor. Ensure you have the necessary CKEditor 5 packages installed and imported.

```javascript
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ Essentials, Paragraph, Bold, Italic ],
		toolbar: [ 'bold', 'italic' ]
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error.stack );
	} );
```

--------------------------------

### Installation and Basic Configuration

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md

Instructions on how to install the Find and Replace feature and include it in your CKEditor 5 setup.

```APIDOC
## Installation

After installing CKEditor 5, add the `FindAndReplace` plugin to your editor configuration.

### Basic Setup

```javascript
import { ClassicEditor, FindAndReplace } from 'ckeditor5';

ClassicEditor
	.create( { 
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ FindAndReplace, /* ... other plugins */ ],
		toolbar: [ 'findAndReplace', /* ... other toolbar items */ ],
		findAndReplace: { 
			// Optional configuration.
		}
	} )
	.then( editor => {
		console.log( 'Editor was initialized' );
	} )
	.catch( error => {
		console.error( error.stack );
	} );
```
```

--------------------------------

### CKEditor 5 Initialization Example

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/tests/manual/view/compositionobserver.md

This shows a basic initialization of CKEditor 5, resulting in the text 'foo bar'. It serves as a starting point for understanding editor setup.

```javascript
{}
foo bar
```

--------------------------------

### Bootstrap CKEditor 5 Inline Widget Project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/implementing-an-inline-widget.md

Use these commands to set up the starter project for the inline widget tutorial. This includes creating a new directory, installing dependencies, and starting the development server.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/inline-widget/starter-files inline-widget
cd inline-widget

npm install
npm run dev
```

--------------------------------

### Install and run starter files

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md

Installs and runs the starter files for the abbreviation plugin tutorial part 1.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-1 abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

--------------------------------

### Initialize Decoupled Document Editor

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/nim-migration/predefined-builds.md

This example shows the basic setup for a decoupled document editor, which separates the editing area from the toolbar. It imports a range of essential plugins.

```javascript
import {
	DecoupledEditor,
	Essentials,
	Alignment,
	FontSize,
	FontFamily,
	FontColor,
	FontBackgroundColor,
	CKFinderUploadAdapter,
	Autoformat,
	Bold,
	Italic,
	Strikethrough,
	Underline,
	BlockQuote,
	CKBox,
	CKFinder,
	Heading,
	Image,
	ImageCaption,
	ImageResize,
	ImageStyle,
	ImageToolbar
```

--------------------------------

### Initialize Classic Editor with ES Modules (CDN)

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/nim-migration/predefined-builds.md

Example of initializing the ClassicEditor using ES module imports from a CDN. This setup includes a comprehensive list of built-in plugins and default configurations.

```javascript
import {
	ClassicEditor,
	Essentials,
	CKFinderUploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
	CKBox,
	CKFinder,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	PictureEditing,
	Indent,
	Link,
	List,
	MediaEmbed,
	Paragraph,
	PasteFromOffice,
	Table,
	TableToolbar,
	TextTransformation,
	CloudServices
} from 'ckeditor5';

class Editor extends ClassicEditor {
	static builtinPlugins = [
		Essentials,
		CKFinderUploadAdapter,
		Autoformat,
		Bold,
		Italic,
		BlockQuote,
		CKBox,
		CKFinder,
		CloudServices,
		Heading,
		Image,
		ImageCaption,
		ImageStyle,
		ImageToolbar,
		ImageUpload,
		Indent,
		Link,
		List,
		MediaEmbed,
		Paragraph,
		PasteFromOffice,
		PictureEditing,
		Table,
		TableToolbar,
		TextTransformation
	];

	static defaultConfig = {
		toolbar: {
			items: [
				'undo', 'redo',
				'|', 'heading',
				'|', 'bold', 'italic',
				'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
			]
		},
		image: {
			toolbar: [
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side',
				'|',
				'toggleImageCaption',
				'imageTextAlternative'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		language: 'en'
	};
}

Editor
	.create( /* Configuration */ )
	.catch( error => console.error( error ) );
```

--------------------------------

### File Naming Examples

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/code-style.md

Examples of file and directory names following the kebab-case convention.

```plaintext
ckeditor.js
tools.js
editor.js
dataprocessor.js
build-all.js and build-min.js
test-core-style-system.html
```

--------------------------------

### List Start Command

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-list/docs/features/lists.md

The ListProperties plugin provides a command to set the starting number for numbered lists.

```APIDOC
## List Start Command

### Description
The `listStart` command, registered by the `ListProperties` plugin, allows you to specify the starting number for a numbered list.

### Method
```javascript
editor.execute( 'listStart', { startIndex: 3 } );
```

### Parameters
- `startIndex` (number) - The number at which the list should start. Defaults to `1`.
```

--------------------------------

### Implement Chat with Mentions in CKEditor 5

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-mention/docs/examples/chat-with-mentions.md

This example shows how to set up CKEditor 5 with the mention feature for a chat-like interface. It configures mentions for both users (starting with '@') and tags (starting with '#'). Learn more about configuring mention feeds in the dedicated guide.

```javascript
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Mention from "@ckeditor/ckeditor5-mention/src/mention";

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, Mention ],
        toolbar: [ 'bold', 'italic' ],
        mention:
            {
                // Options for the "@" marker.
                marker: '@',
                // Provide an array of objects to be used as suggestions.
                // The items are filtered by the user input.
                items: [
                    { id: '1', name: 'Kate Gregory' },
                    { id: '2', name: 'Edgars Rutkovskis' },
                    { id: '3', name: 'Feroz Khan' },
                    { id: '4', name: 'Chao Wang' },
                    { id: '5', name: 'Malik Kehl' }
                ],
                // Called when a mention is created.
                // The callback receives the mention's id and name.
                onMentionAdd: ( id, name ) => {
                    console.log( `Mentioned: ${name} (ID: ${id})` );
                }
            }
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );
```

--------------------------------

### Install and run starter project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-1.md

Use these commands to set up the initial project structure and dependencies for the abbreviation plugin. Ensure you have Node.js and npm installed.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/starter-files abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

--------------------------------

### Set up CKEditor 5 Block Widget Starter Project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/implementing-a-block-widget.md

Use these bash commands to clone the starter project, install dependencies, and run the development server for the block widget tutorial.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/block-widget/starter-files block-widget
cd block-widget

npm install
npm run dev
```

--------------------------------

### Main Application Entry Point with Product Data

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/using-react-in-a-widget.md

This JavaScript code sets up the React application's entry point using `ReactDOM.createRoot`. It renders the `<App />` component and provides it with a hard-coded list of product definitions, which in a real application would typically be loaded from a database.

```javascript
import ReactDOM from 'react-dom/client';
import App from './app';

// Render the <App> in the <div class="root"></div> element found in the DOM.
ReactDOM.createRoot( document.getElementById( 'root' ) ).render(
	<App
		// Feeding the application with predefined products.
		// In a real-life application, this sort of data would be loaded
		// from a database. To keep this tutorial simple, a few
		// hard–coded product definitions will be used.
		products={ [
			{
				id: 1,
				name: 'Colors of summer in Poland',
				price: '$1500',
				image: 'fields.jpg'
			},
			{
				id: 2,
				name: 'Mediterranean sun on Malta',
				price: '$1899',
				image: 'malta.jpg'
			},
			{
				id: 3,
				name: 'Tastes of Asia',
				price: '$2599',
				image: 'umbrellas.jpg'
			},
			{
				id: 4,
				name: 'Exotic India',
				price: '$2200',
				image: 'tajmahal.jpg'
			}
		]
	/>
)
```

--------------------------------

### Install and Run CKEditor 5 Project

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/widgets/implementing-an-inline-widget.md

Use these commands to set up the final project for the inline widget tutorial. Ensure you have Node.js installed.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/inline-widget/final-project final-project
cd final-project

npm install
npm run dev
```

--------------------------------

### Default Theme Customization Example

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/docs/examples/theme-customization.md

This snippet shows an example of CKEditor 5 with a customized dark theme. Refer to the dedicated guide for detailed implementation steps.

```html
<div class="u-flex-horizontal u-gap-5">
	<ck:checkbox id="theme-mode-light" type="radio" name="theme-mode" value="light" label="Light" />
	<ck:checkbox id="theme-mode-dark" type="radio" name="theme-mode" value="dark" label="Dark" checked />
</div>

{@snippet examples/default-theme}
```

--------------------------------

### Start Sample App with Package Generator

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/development-tools/package-generator/using-package-generator.md

Navigate into the generated package directory and start the sample application to see your changes live. This command initiates the Vite development server with hot reloading.

```bash
cd ckeditor5-callout
npm run start
```

--------------------------------

### Install Paste from Office Plugin

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-paste-from-office/docs/features/paste-from-google-docs.md

Add the PasteFromOffice plugin to your CKEditor 5 setup. Ensure you have a license key or use the GPL version.

```javascript
import { ClassicEditor, PasteFromOffice } from 'ckeditor5';

ClassicEditor
  .create( {
    licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
    plugins: [ PasteFromOffice, /* ... */ ]
  } )
  .then( /* ... */ )
  .catch( /* ... */ );
```

--------------------------------

### Run Documentation Verification Crawler

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/development-environment.md

Build and serve the documentation, then run the verification crawler. Adjust your hosts file if needed, as the crawler defaults to `http://fake.ckeditor.com:8080`.

```bash
pnpm run docs:verify
```

--------------------------------

### Start Manual Test Server with Languages

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/development-environment.md

Start the manual test server with a specified main language and additional languages for comprehensive testing, including right-to-left language support.

```bash
pnpm run manual --language="en" --additionalLanguages="ar,pl,..."
```

--------------------------------

### Install FontFamily Feature in CKEditor 5

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/docs/features/font.md

Add only the FontFamily plugin and its toolbar button to a ClassicEditor build. This snippet demonstrates a minimal setup for font family customization.

```javascript
import { ClassicEditor, FontFamily } from 'ckeditor5';

ClassicEditor
	.create( {
		plugins: [ FontFamily, /* ... */ ],
		toolbar: [ 'fontFamily', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

--------------------------------

### Install CKEditor 5 with npm Packages

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/nim-migration/migration-to-new-installation-methods.md

Use this setup with module bundlers like Vite or webpack, or with JavaScript meta-frameworks. Ensure all necessary plugins and translations are imported.

```javascript
import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from 'ckeditor5';
import { FormatPainter, SlashCommand } from 'ckeditor5-premium-features';

import coreTranslations from 'ckeditor5/translations/pl.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/pl.js';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		plugins: [ Essentials, Bold, Italic, Paragraph, Mention, FormatPainter, SlashCommand ],
		toolbar: [ /* ... */ ],
		licenseKey: '<YOUR_LICENSE_KEY>',
		translations: [
			coreTranslations,
			premiumFeaturesTranslations
		]
	} );
```

--------------------------------

### Vue 3 CKEditor 5 Integration (After CDN)

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/migration-to-cdn/vuejs-v3.md

Example of a Vue 3 component using CKEditor 5 with a CDN-based installation. It utilizes the `useCKEditorCloud` function to load scripts.

```vue
<template>
	<h2>Using CKEditor 5 from NPM in Vue 3</h2>
  	<ckeditor
		v-if="TestEditor"
		v-model="data"
		tag-name="textarea"
		:editor="TestEditor"
		:config="config"
	/>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
	version: '{@var ckeditor5-version}'
} );

const TestEditor = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	const {
		ClassicEditor: BaseEditor, Paragraph,
		Essentials, Heading, Bold, Italic
	} = cloud.data.value.CKEditor;

	return class TestEditor extends BaseEditor {
		static builtinPlugins = [
			Essentials,
			Paragraph,
			Heading,
			Bold,
			Italic
		];
	};
} );

const data = ref( '<p>Hello world!</p>' );
const config = reactive( {
	licenseKey: '<YOUR_LICENSE_KEY>',
	toolbar: [ 'heading', '|', 'bold', 'italic' ]
} );
</script>
```

--------------------------------

### Vue 3 CKEditor 5 Integration (Before CDN)

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/migration-to-cdn/vuejs-v3.md

Example of a Vue 3 component using CKEditor 5 with an NPM-based installation. This code needs to be updated for CDN usage.

```vue
<template>
	<h2>Using CKEditor 5 from NPM in Vue 3</h2>

	<ckeditor
		v-model="data"
		tag-name="textarea"
		:editor="TestEditor"
		:config="config"
	/>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import {
	ClassicEditor,
	Essentials,
	Paragraph,
	Heading,
	Bold,
	Italic,
	type EventInfo
} from 'ckeditor5';

class TestEditor extends ClassicEditor {
	static builtinPlugins = [
		Essentials,
		Paragraph,
		Heading,
		Bold,
		Italic
	];
}

const data = ref( '<p>Hello world!</p>' );
const config = reactive( {
	licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
	toolbar: [ 'heading', '|', 'bold', 'italic' ]
} );
</script>
```

--------------------------------

### Serve CKEditor 5 Documentation

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/development-environment.md

Start an HTTP server to serve the generated CKEditor 5 documentation. This is useful for previewing the documentation locally after building it.

```bash
pnpm run docs:serve
```

--------------------------------

### CKEditor 5 Initialization with Basic Plugins

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5/tests/manual/abbreviation-level-1.md

Sets up a CKEditor 5 instance using essential plugins and a classic editor configuration. This code serves as the entry point for the editor and demonstrates basic plugin integration.

```javascript
// app.js

import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic ],
		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList' ]
	} )
	.then( editor => {
		console.log( 'Editor was initialized', editor );
	} )
	.catch( error => {
		console.error( error.stack );
	} );
```

--------------------------------

### Superbuild Editor Configuration

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/nim-migration/predefined-builds.md

This example demonstrates the setup for a 'Superbuild' which includes a vast array of plugins. Note that math equations and spelling/grammar features are not included by default in this CDN distribution.

```javascript
const {
	ClassicEditor: ClassicEditorBase,
	InlineEditor: InlineEditorBase,
	BalloonEditor: BalloonEditorBase,
	DecoupledEditor: DecoupledEditorBase,
	CKFinderUploadAdapter,
	Alignment,
	Autoformat,
	Bold,
	Italic,
	Underline,
	Strikethrough,
	Superscript,
	Subscript,
	Code,
	BlockQuote,
	CKBox,
	CKBoxImageEdit,
	CKFinder,
	CloudServices,
	CodeBlock,
	Essentials,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	AutoImage,
	ImageResize,
	ImageUpload,
	ImageInsert,
	PictureEditing,
	Indent,
	IndentBlock,
	TextPartLanguage,
	Link,
	AutoLink,
	LinkImage,
	List,
	ListProperties,
	TodoList,
	MediaEmbed,
	Paragraph,
	FindAndReplace,
	FontBackgroundColor,
	FontColor,
	FontFamily,
	FontSize,
	Highlight,
	HorizontalLine,
	HtmlEmbed,
	GeneralHtmlSupport,
	HtmlComment,
	Mention,
	PageBreak,
	PasteFromOffice,
	RemoveFormat,
	StandardEditingMode,
	ShowBlocks,
	Style,
	SourceEditing,
	SpecialCharacters,
	SpecialCharactersEssentials,
	Table,
	TableToolbar,
	TableCellProperties,
	TableProperties,
	TableCaption,
	TableColumnResize,
	TextTransformation,
	WordCount,
	Base64UploadAdapter
} = CKEDITOR;

const {
	AIAssistant,
	OpenAITextAdapter,
	CaseChange,
	Comments,
	ExportPdf,
	ExportWord,
	MultiLevelList,
	Pagination,
	RealTimeCollaborativeComments,
	RealTimeCollaborativeRevisionHistory,
	RealTimeCollaborativeTrackChanges,
	RevisionHistory,
	TrackChanges,
	TrackChangesData
} = CKEDITOR_PREMIUM_FEATURES;

class ClassicEditor extends ClassicEditorBase {}

class InlineEditor extends InlineEditorBase {}

class BalloonEditor extends BalloonEditorBase {}

class DecoupledEditor extends DecoupledEditorBase {}

for ( const Editor of [ ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor ] ) {
```

--------------------------------

### CKEditor 5 Initialization (Before CDN Migration)

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/migration-to-cdn/vanilla-js.md

This is an example of how CKEditor 5 was initialized using ES module imports before migrating to a CDN-based setup. Note the `import` statements for `ClassicEditor` and premium features.

```javascript
import { ClassicEditor } from 'ckeditor5';
import { AIAdapter, /* ... other imports */ } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		attachTo: document.querySelector('#editor'),
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		// ... other configuration
	} )
	.catch( error => {
		console.error(error);
	} );
```

--------------------------------

### Changelog Output Example

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/changelog-entries.md

Illustrates how the formatted changelog entries are rendered. This example shows a major breaking change with package scope and issue referencing.

```markdown
Changelog
=========

## [51.0.0](https://github.com/ckeditor/ckeditor5/compare/v50.1.1...v51.0.0) (June 17, 2025)

### MAJOR BREAKING CHANGES [ℹ️](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/versioning-policy.html#major-and-minor-breaking-changes)

* **[utils](https://www.npmjs.com/package/@ckeditor/ckeditor5-utils)**: The `utils#foo()` method was moved to the `engine` package. See [#9](https://github.com/ckeditor/ckeditor5/issues/9).
```

--------------------------------

### CKEditor 5 Data Processing Example

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-paste-from-office/tests/_data/image/mixed-images-from-filesystem/normalized.word2023.html

This snippet illustrates how to get and set data for a CKEditor 5 instance. It shows retrieving the editor's content as HTML and setting new content.

```javascript
const editor = await ClassicEditor.create( document.querySelector( '#editor' ) );

// Get editor data
const data = editor.getData();
console.log( data );

// Set editor data
editor.setData( '<p>Hello CKEditor 5!</p>' );
```

--------------------------------

### Initialize CKEditor with Basic Configuration

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/tutorials/crash-course/plugin-configuration.md

This snippet shows the basic structure for initializing a CKEditor instance with an optional configuration object. It includes placeholders for essential options like 'attachTo' and 'licenseKey', and demonstrates where to place plugin-specific configurations.

```javascript
const editor = await ClassicEditor.create( {
	attachTo: element,
	licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
	// Other options are omitted for readability - do not remove them.
	highlight: {

	}
} );
```

--------------------------------

### Set up HTML page with jQuery from CDN

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations-cdn/jquery.md

Create a basic HTML structure and include jQuery using a CDN link. Ensure jQuery is loaded before any custom scripts that depend on it.

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CKEditor&nbsp;5 with jQuery Integration</title>

	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
	<div id="editor">
		<p>Hello from CKEditor&nbsp;5 with jQuery!</p>
	</div>

	<script>
		$( document ).ready( () => {
			// jQuery code will go here
			console.log( 'jQuery is loaded and ready!' );
		} );
	</script>
</body>
</html>
```

--------------------------------

### Configure Link Toolbar with Custom Component

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/update-to-45.md

Add the registered custom component to the link toolbar configuration in the editor's setup. This example shows how to include 'myCustomLinkInfo' alongside other link toolbar items.

```javascript
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		link: {
			toolbar: [ 'myCustomLinkInfo', '|', 'editLink', 'unlink' ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

--------------------------------

### Use useMultiRootEditor Hook in React

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations/react-multiroot-npm.md

Integrate the CKEditor 5 multi-root editor into a React component using the `useMultiRootEditor` hook. This example shows basic setup with editor configuration, initial data, and license key.

```tsx
// App.jsx / App.tsx

import { MultiRootEditor, Bold, Essentials, Italic, Paragraph } from 'ckeditor5';
import { useMultiRootEditor } from '@ckeditor/ckeditor5-react';

import 'ckeditor5/ckeditor5.css';

const App = () => {
	const editorProps = {
		editor: MultiRootEditor,
		data: {
			intro: '<h1>React multi-root editor</h1>',
			content: '<p>Hello from CKEditor&nbsp;5 multi-root!</p>'
		},
		config: {
			licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
			plugins: [ Essentials, Bold, Italic, Paragraph ],
			toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ]
		}
	};

	const {
		editor,
		toolbarElement,
		editableElements,
		data,
		setData,
		attributes,
		setAttributes
	} = useMultiRootEditor( editorProps );

	return (
		<div className="App">
			<h2>Using CKEditor&nbsp;5 multi-root editor in React</h2>

			{ toolbarElement }

			{ editableElements }
		</div>
	);
}

export default App;
```

--------------------------------

### Start Manual Test Server

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/framework/contributing/development-environment.md

Start an HTTP server for manual testing of CKEditor 5. This task can accept optional language configurations for testing localized editors.

```bash
pnpm run manual
```

--------------------------------

### Install Image Resize Plugins

Source: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/docs/features/images-resizing.md

Use this configuration to enable image resizing handles by installing the ImageResizeEditing and ImageResizeHandles plugins. This avoids loading the ImageResizeButtons plugin if not needed.

```js
import { ClassicEditor, Image, ImageResizeEditing, ImageResizeHandles } from 'ckeditor5';

ClassicEditor
	.create( { 
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Image, ImageResizeEditing, ImageResizeHandles, /* ... */ ],
		image: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

--------------------------------

### Complete HTML Structure for CKEditor 5 with Import Maps

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations-cdn/quick-start.md

A full HTML example demonstrating the integration of import maps and module script for CKEditor 5, including premium features and basic editor setup.

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CKEditor 5 - Quick start CDN</title>
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.css" />
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.css" />
	</head>
	<body>
		<div id="editor">
			<p>Hello from CKEditor 5!</p>
		</div>

		<script type="importmap">
			{
				"imports": {
					"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.js",
					"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/",
					"ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.js",
					"ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/"
				}
			}
		</script>

		<script type="module">
			import {
				ClassicEditor,
				Essentials,
				Bold,
				Italic,
				Font,
				Paragraph
			} from 'ckeditor5';
			import { FormatPainter } from 'ckeditor5-premium-features';

			ClassicEditor
				.create( {
					attachTo: document.querySelector( '#editor' ),
					licenseKey: '<YOUR_LICENSE_KEY>',
					plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
				toolbar: [
					'undo', 'redo', '|', 'bold', 'italic', '|',
					'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'formatPainter'
				]
			} )
			.then( /* ... */ )
			.catch( /* ... */ );
		</script>
	</body>
</html>
```

--------------------------------

### Create a Svelte Project with Vite

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/getting-started/integrations/svelte.md

Use Vite to quickly set up a new Svelte project. This command initializes a Svelte project named 'ckeditor-svelte' and installs its dependencies.

```bash
npm create vite@latest ckeditor-svelte -- --template svelte
cd ckeditor-svelte
npm install
```

--------------------------------

### Register Custom Link Provider

Source: https://github.com/ckeditor/ckeditor5/blob/master/docs/updating/update-to-45.md

Register a custom link provider with the LinkUI plugin to offer a list of predefined links in the link form. This example defines a provider with a label and a method to get link items.

```javascript
editor.plugins.get( 'LinkUI' ).registerLinksListProvider( {
	label: 'My links',

	// Return a list of links to display in the link form
	getListItems: () => [
		{
			id: 'homepage',
			href: 'https://example.com',
			label: 'Homepage',
			icon: linkIcon
		}
	],

	// Optional: Customize how links are displayed in preview
	getItem: href => {
		return {
			href,
			label: 'My custom label',
			tooltip: 'Open link'
		};
	}
} );
```