CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideFind and replace

The FindAndReplace feature allows for finding and replacing any text in the editor easily. It helps the user find words, word parts or phrases matching the case of the searched text, which is especially helpful in lengthy documents and one that may utilize certain words in different contexts. It also lets the editor replace a chosen one or all instances of the searched phrase with a single click, making tedious, repeated changes fast and easy. This may e.g. help ensuring the cohesion of an edited piece of code, while renaming a variable or a function.

# Demo

Use the find and replace toolbar button Find and replace to invoke the search panel and find and replace desired words or phrases or use the Ctrl/Cmd+F keyboard shortcut. For a starter, try replacing “steam” with “diesel” to make the demo content more up to date. Be careful to match the case, for there are different instances of the word present in the document!

Steam locos are really useful!

Steam locomotives waiting at a small freight station.
Steam locomotives waiting at a small freight station.

A steam locomotive is one that uses a steam engine as the prime source of power to move and pull the cars.

Steam locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica maybe, where the railway network is rather scarce). Being powerful and not requiring additional technical infrastructure like their younger siblings — the electric locomotives — steam engines are perfect for most types of tasks.

Steam engines can pull passenger trains, boxcars with goods, tank cars, platform wagons with wood logs... Should the conditions be tough and the load be too heavy for a single steam locomotive, that can be put together in a pair of engines. And sometimes you can even see three of four of them if the job is exceptionally demanding.

Most national and private railway companies nowadays own or lease a multitude of steam engines, ranging from small, nimble ones used for maneuvering on the station to the bulky, large ones for the cross-continental trail.

Steam engines also come in all shapes and all colors, making up a happy useful bunch.

# Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-find-and-replace package:

npm install --save @ckeditor/ckeditor5-find-and-replace

Then add the FindAndReplace plugin to your plugin list:

import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ FindAndReplace, ... ],
        toolbar: [ 'findAndReplace', ... ],
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Common API

The FindAndReplace plugin registers the 'findAndReplace' UI button component and the 'find', 'findNext', 'findPrevious', 'replace' and 'replaceAll' commands.

The commands can be executed using the editor.execute() method:

// Find all occurrences of a given text.
editor.execute( 'find', 'steam' );

You can also move the highlight through all matched results with the 'findNext' and 'findPrevious' commands:

// Move the search highlight to the next match.
editor.execute( 'findNext' );

You can also replace all occurrences of a given text in the editor instance using the 'replaceAll' command:

editor.execute( 'replaceAll', 'diesel', 'steam' );

We recommend using the official 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.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace.