CKEditor 5 Find and Replace is a comprehensive plugin that adds sophisticated search and replace functionality to CKEditor 5. It provides advanced search capabilities with support for case-sensitive matching, whole word matching, and regular expressions, along with navigation through search results and both individual and batch replacement operations.
npm install ckeditor5 (included in the main CKEditor 5 package)import { FindAndReplace } from "@ckeditor/ckeditor5-find-and-replace";For accessing individual components:
import {
FindAndReplace,
FindAndReplaceEditing,
FindAndReplaceUI,
FindCommand,
ReplaceCommand
} from "@ckeditor/ckeditor5-find-and-replace";import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [FindAndReplace],
findAndReplace: {
uiType: 'dialog' // or 'dropdown'
}
})
.then(editor => {
// Editor ready with find and replace functionality
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error);
});// Access the editing plugin
const findAndReplaceEditing = editor.plugins.get('FindAndReplaceEditing');
// Perform a search
const results = findAndReplaceEditing.find('search term', {
matchCase: true,
wholeWords: false
});
// Execute commands
editor.execute('find', 'search term');
editor.execute('replace', 'replacement text', results.first);
editor.execute('replaceAll', 'replacement text', 'search term');
// Error handling
try {
const result = editor.execute('find', 'search term');
if (result.results.length === 0) {
console.log('No results found');
}
} catch (error) {
console.error('Find operation failed:', error);
}CKEditor 5 Find and Replace is built around several key components:
Core plugin classes that integrate the find and replace functionality into CKEditor 5. The main FindAndReplace plugin coordinates between editing and UI features.
class FindAndReplace extends Plugin {
static requires: [FindAndReplaceEditing, FindAndReplaceUI];
static pluginName: 'FindAndReplace';
static isOfficialPlugin: true;
init(): void;
}Complete command system for executing find and replace operations programmatically. Includes commands for search, navigation, and replacement operations.
class FindCommand extends Command {
constructor(editor: Editor, state: FindAndReplaceState);
execute(callbackOrText: string | FindCallback, options?: FindAttributes): {
results: Collection<FindResultType>;
findCallback: FindCallback;
};
}Observable state management with comprehensive UI components including form views, focus management, and event handling.
class FindAndReplaceState extends ObservableMixin {
constructor(model: Model);
results: Collection<FindResultType>;
highlightedResult: FindResultType | null;
searchText: string;
replaceText: string;
matchCase: boolean;
matchWholeWords: boolean;
}Complete type definitions for all interfaces, configuration options, and event types used throughout the find and replace system.
interface FindAndReplaceConfig {
uiType?: 'dialog' | 'dropdown';
}
type FindResultType = {
id?: string;
label?: string;
start?: number;
end?: number;
marker?: Marker;
};