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 dialog. Use it to find and replace words or phrases. You can also use the Ctrl/Cmd+F keyboard shortcut. Try replacing “AI” with “artificial intelligence” to make the content appeal to less tech-savvy users. Be careful to match the case!

AI Alchemy: Crafting Captivating Content in 2024

CKEditor 5 AI Assistant feature helps generate content. — Using AI Assistant in CKEditor 5.

In 2024, AI has turbocharged content creation, making it faster and more engaging. Automation takes care of the nitty-gritty tasks like research and initial drafts, giving human creators more time for the fun stuff.

Thanks to Natural Language Processing, AI now gets context, tone, and audience preferences. This means content can be personalized, SEO-optimized, and perfectly tuned to connect with different audiences.

But the real magic happens in collaboration. AI is like a creative sidekick, suggesting ideas, offering feedback, and seamlessly working alongside human creators. The result? Content that's not just efficient but also a cool blend of machine smarts and human creativity.

In a nutshell, AI in 2024 is revolutionizing content creation, offering creators powerful tools to make content that's not only efficient but also captivating and globally resonant.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, FindAndReplace } from 'ckeditor5';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ FindAndReplace, /* ... */ ],
		toolbar: [ 'findAndReplace', /* ... */ ],
		findAndReplace: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Configuration

# Configuring the UI type

By default, the find and replace form displays inside a dialog. That allows for keeping it open while editing the document at the same time. Alternatively, you can display the feature in a dropdown. To do this, use the config.findAndReplace.uiType configuration option:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        findAndReplace: {
            uiType: 'dropdown'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

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.

You can execute the commands 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.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.

Find and replace

# Demo

AI Alchemy: Crafting Captivating Content in 2024

# Installation

# Configuration

# Configuring the UI type

AI Alchemy: Crafting Captivating Content in 2024

# Related features

# Common API

# Contribute