# Slash commands

The slash commands feature lets you execute a predefined command by writing its name or alias directly in the editor. When you type a slash (`/`), the suggested commands are displayed in a panel next to it. You can also type a phrase after the `/` to filter the results in the panel and to easily find the desired command.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Type the `/` character to invoke a panel with predefined commands. Then, filter the result list by typing more characters after the slash, for example: `/list`. Slash commands can also apply templates or styles defined in the editor.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

> **Note**
>
> The slash commands feature uses the [mentions feature](mentions.md) under the hood, so ensure you [install it](mentions.md#installation) too.

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Mention } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ SlashCommand, Mention, /* ... */ ],
		slashCommand: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Mention } = CKEDITOR;
const { SlashCommand } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ SlashCommand, Mention, /* ... */ ],
		slashCommand: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="unsupported-contexts">

## Unsupported contexts

Slash commands are automatically disabled inside [code blocks](code-blocks.md). Typing `/` inside a code block will insert the character as plain text without triggering the command panel.

<a id="configuration">

## Configuration

> **Note**
>
> For more technical details, check the [plugin configuration reference](../api/module_slash-command_slashcommandconfig-SlashCommandConfig.md).

Although the slash commands feature is based on the [mention](mentions.md) feature, it does not require any additional configuration to work. In particular, the `/` marker is configured automatically as well as the list of [default slash commands](../api/module_slash-command_slashcommandconfig-SlashCommandConfig.md#function-getDefaultCommands) that will work right away (as long as they are enabled in the editor).

However, if you want to modify this list, it is possible to easily [add](#adding-slash-commands) or [remove](#removing-slash-commands) commands through configuration. It is also possible to [limit the number of commands](#limiting-displayed-command-list) displayed in the panel.

<a id="adding-slash-commands">

### Adding slash commands

It is possible to add both commands registered in the editor and commands that execute custom logic. The parameter you should use for custom commands is [`slashCommand.extraCommands`](../api/module_slash-command_slashcommandeditorconfig-SlashCommandEditorConfig.md#member-extraCommands).

<a id="editor-commands">

#### Editor commands

To add an editor command as a slash command, besides the [`id`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-id) and the [`title`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-title) you have to provide the [`commandName`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-commandName) parameter. The example below shows how to add a `bold` slash command:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		slashCommand: {
			extraCommands: [
				{
					id: 'bold',
					title: 'Bold',
					commandName: 'bold',
					// ...
				},
				// ...
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="proxy-commands">

#### Proxy commands

To add a proxy command (a command that executes custom logic), besides the [`id`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-id) and the [`title`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-title) you have to provide a callback function for the [`execute`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-execute) parameter. If you do not provide an `execute` parameter for a proxy command, the editor will throw an error when the user tries to execute it.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		slashCommand: {
			extraCommands: [
				{
					id: 'alert',
					title: 'Alert',
					execute: editor => { console.log( 'Custom logic was executed.' ) }
					// ...
				},
				// More extra commands.
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="removing-slash-commands">

### Removing slash commands

To remove a command from the default list of slash commands, add its name to the array of removed commands ([`slashCommand.removeCommands`](../api/module_slash-command_slashcommandeditorconfig-SlashCommandEditorConfig.md#member-removeCommands)). The command will only be removed from the list of [default slash commands](../api/module_slash-command_slashcommandconfig-SlashCommandConfig.md#function-getDefaultCommands), and not from the editor.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		slashCommand: {
			removeCommands: [ 'heading', 'paragraph', /* ... */ ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="limiting-displayed-command-list">

### Limiting displayed command list

By default, all available slash commands are displayed in the panel. If you want to limit the number of commands displayed to the user, use the [`slashCommand.dropdownLimit`](../api/module_slash-command_slashcommandeditorconfig-SlashCommandEditorConfig.md#member-dropdownLimit) parameter. It will determine the number of displayed items.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		slashCommand: {
			dropdownLimit: 4
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="single-slash-command-configuration">

### Single slash command configuration

> **Note**
>
> For more technical details, check the [slash command configuration reference](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md).

There are some more optional parameters of a single slash command entry you might find useful when configuring your own commands:

* [`aliases`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-aliases) – To extend command filtering in the panel.
* [`description`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-description) – Helpful if a title is not descriptive enough.
* [`icon`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-icon) – To visually customize your own command.
* [`isEnabled`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-isEnabled) – To provide custom logic and decide when the command is displayed in the panel.

Here is an example of how you can use them:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		slashCommand: {
			extraCommands: [
				{
					id: 'bold',
					title: 'Bold',
					execute: editor => { /* Custom logic. */ },
					aliases: [ 'strong' ],
					description: 'Style the text in bold.',
					icon: customIcon,
					isEnabled: editor => { /* Custom logic. */ }
				},
				// ...
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="sorting-and-filtering">

### Sorting and filtering

By default, slash commands are sorted alphabetically by title. The order changes when the user starts filtering. Slash commands matched by [`id`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-id) are displayed first, then sorted by [`title`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-title), then by [`aliases`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-aliases), and finally by [`description`](../api/module_slash-command_slashcommandconfig-SlashCommandDefinition.md#member-description).

<a id="integration-with-other-features">

### Integration with other features

Slash commands are integrated with the [template](template.md) and [style](style.md) features. It means that all templates and styles can be applied also using the corresponding slash command.

<a id="related-features">

## Related features

You may want to check the following similar productivity features of CKEditor 5:

* [Autoformatting](autoformat.md) – Lets you quickly apply formatting to the content you are writing.
* [Automatic text transformation](text-transformation.md) – Enables automatic turning of snippets such as `(tm)` into `™` and `"foo"` into `“foo”`.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)