CKEditor5 find and replace

CKEditor 5 Find and Replace brings the native CKEditor 5 Find and Replace panel into any Drupal 10 or 11 CKEditor 5 toolbar with a single drag-and-drop. Editors can instantly locate and update any word or phrase inside a body field — without leaving the editor, without a page reload, and without any coding or third-party dependencies. Whether you manage a large content team that needs to standardise terminology across dozens of nodes, or you simply want the familiar Ctrl+F shortcut available while writing, this module adds it in under a minute.

Features

Find

• Instant search — Highlights all matching occurrences in the editor as you type.
• Result counter — Displays the current match index and total count directly inside the Find field (e.g. 2 of 7).
• Previous / Next navigation — Step through every match using the arrow buttons or keyboard.
• Visual highlights — All matches are highlighted; the active match is shown in a distinct orange colour for easy scanning.

Replace

• Replace single — Replaces only the currently active (orange) match and automatically advances to the next one.
• Replace all — Replaces every occurrence of the search term in the entire document in a single action.

Search options

• Match case — Toggle case-sensitive searching; when enabled, Hello and hello are treated as different words.
• Whole words only — Restricts matches to complete words; searching for cat will not match category or concatenate.

Registered commands

The FindAndReplace plugin registers the following CKEditor 5 commands and UI components:

• find
• findNext
• findPrevious
• replace
• replaceAll
• findAndReplace toolbar button

Editor experience

• Keyboard shortcut — Open the panel instantly with Ctrl+F (Windows / Linux) or ⌘F (macOS) while the editor has focus.
• No output markup — The feature is a pure editor utility; nothing extra is stored in the database or output in rendered HTML.
• Zero dependencies — No CDN assets, no npm runtime packages. The compiled plugin is bundled directly in the module.

Post-Installation

After enabling the module, follow these steps to add the button to your editor:

1. Open your text format configuration.
   
   Go to Configuration → Content authoring → Text formats and editors ( /admin/config/content/formats). Click Configure next to the format used on your body fields (e.g. Full HTML).
2. Add the toolbar button.
   
   In the CKEditor 5 toolbar section, drag the Find and replace button from the Available items tray into an active toolbar row.
3. Save and rebuild caches.
   
   Click Save configuration, then run drush cr.
4. Use it.
   
   Open or create any content node that uses the configured text format. Click the Find and replace toolbar button or press Ctrl+F / ⌘F to open the panel. Type a search term, navigate matches with the arrow buttons, and use Replace or Replace all to update text.

Additional Requirements

• Drupal 10.x or 11.x
• PHP 8.1 or higher
• CKEditor 5 module (included in Drupal core ≥ 9.3)

No third-party PHP libraries, JavaScript frameworks, or external CDN assets are required. The module is entirely self-contained.

Recommended Modules

• CKEditor 5 Premium Features — If your team needs tracked changes, comments, revision history, or real-time collaborative editing alongside Find and Replace, this module integrates CKEditor 5's premium collaboration plugins with Drupal.
• Editor Advanced Link — Pairs well when editors use Find and Replace to locate content before adding or updating links — extends the CKEditor 5 link dialog with target, title, and CSS class fields.

• CKEditor 5 Fullscreen — Expands the editor to fill the browser window, giving Find and Replace more room to work when editing long-form content.

Similar Projects

• CKEditor Find — The CKEditor 4 equivalent of this module. If you are still on CKEditor 4 (Drupal 9 or earlier), use that module instead. CKEditor 5 Find and Replace is the CKEditor 5-native replacement built for Drupal 10 and 11.
• Drupal's built-in spell checker — The browser's native spell-check underlines misspellings inline, but cannot locate or batch-replace strings across a document. Find and Replace fills that gap for content-level search and bulk updates.

Use Cases

CKEditor 5 Find and Replace is especially useful for:

• Content standardisation — Quickly rename a product, brand, or term across a long article without manually scanning every paragraph.
• Copyediting — Catch repeated words, inconsistent capitalisation, or common typos before publishing.
• Template editing — Replace placeholder text (e.g. [CLIENT NAME], [DATE]) in reusable content templates in seconds.
• Long-form content — Navigate quickly to a specific phrase in a lengthy policy document, manual, or report.
• Multilingual sites — Locate untranslated strings or stale locale-specific references left over from copying content between language versions.

Demo

1. Go to https://simplytest.me/project/ckeditor5_findandreplace.
2. Click Launch Sandbox and install Drupal as normal.
3. Enable the CKEditor 5 Find and Replace module.
4. Go to admin/config/content/formats/manage/full_html, drag the Find and replace button into the active toolbar, and save.
5. Open or create a content node, press Ctrl+F, and use the panel to find and replace text in the editor.

Support

Please post bug reports, feature requests, and support questions to the CKEditor 5 Find and Replace issue queue.

When reporting an issue, please include your Drupal core version, PHP version, browser, the steps to reproduce, and any relevant output from Reports → Recent log messages.

Supporting This Module

If this module saves you time, the best ways to support continued development are:

• Report bugs and suggest features in the issue queue.
• Contribute patches, test coverage, or documentation improvements.
• Post a review on the project page — community ratings help others discover the module.
• Help test release candidates against Drupal 10 and 11 minor updates.