Find and replace
The find and replace feature lets you find and replace any text in your document. This speeds up your work and helps with the consistency of your content.
# Demo
Use the find and replace toolbar button 
to open the search panel. Use the panel to find and replace words or phrases. You can also use the Ctrl/Cmd+F keyboard shortcut. Try replacing “steam” with “diesel” to make the content more up-to-date. Be careful to match the case!
Steam locos are really useful!
A steam locomotive is one that uses a steam engine as the prime source of power to move and pull cars.
Steam locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica, 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, you name it. If the conditions are tough or the load is too heavy for a single steam locomotive, a pair of engines can be used. And sometimes you can even see three or four of them if the job is exceptionally demanding.
Most national and private railway companies nowadays own or lease a multitude of steam engines. They range from small, nimble ones used for maneuvering at railway stations to large, bulky machines utilized for the cross-continental trail.
Steam engines also come in all shapes and colors, making up a happy useful bunch.
This demo only presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Installation
The find and replace feature is enabled by default in the superbuild only.
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';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ FindAndReplace, /* ... */ ],
toolbar: [ 'findAndReplace', /* ... */ ],
} )
.then( /* ... */ )
.catch( /* ... */ );
Read more about installing plugins.
# Related features
- Automatic text transformation – Enables automatic turning of snippets such as
(tm)into™and"foo"into“foo”.
# 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 at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.