title: Select all
{@snippet features/build-select-all-source}
The {@link module:select-all/selectall~SelectAll} feature allows selecting the entire content of the WYSIWYG editor using the Ctrl/⌘+A keystroke or the toolbar button.
Press Ctrl/⌘+A or use the toolbar button to select the entire content of the editor.
{@snippet features/select-all}
Note that when editing an {@link features/image#image-captions image caption}, the selection will only expand to the boundaries of the caption. Successive use will expand the selection beyond these boundaries to encompass more and more content up to the entire editable root of the editor. This is to allow the user to do more focused editing and select only related content.
The Select All boundaries are created by any {@link framework/guides/deep-dive/schema#limit-elements limit element} which can contain a text or paragraph.
This feature is enabled by default in all builds (loaded by the {@link module:essentials/essentials~Essentials} plugin). The installation instructions are for developers interested in building their own, custom rich text editor.
To add this feature to your editor, install the @ckeditor/ckeditor5-select-all package:
npm install --save @ckeditor/ckeditor5-select-all
Then add the SelectAll plugin to your plugin list:
import SelectAll from '@ckeditor/ckeditor5-select-all/src/selectall';
ClassicEditor
.create( document.querySelector( '#editor' ), {
// Load the plugin.
plugins: [ SelectAll, ... ],
// Display the "Select all" button in the toolbar.
toolbar: [ 'selectAll', ... ],
} )
.then( ... )
.catch( ... );
The {@link module:select-all/selectall~SelectAll} plugin registers the 'selectAll' UI button component and the 'selectAll' command implemented by {@link module:select-all/selectallcommand~SelectAllCommand}.
The command can be executed using the {@link module:core/editor/editor~Editor#execute editor.execute()} method:
// Select the entire content of the editor.
editor.execute( 'selectAll' );
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-select-all.