Complete command system for executing find and replace operations programmatically. All commands integrate with CKEditor's command system and can be executed using editor.execute().
Command for initiating find operations with custom search callbacks or simple text search.
/**
* Command for initiating find operations. Supports both text search
* and custom search callbacks with configurable options.
*/
class FindCommand extends Command {
/**
* Creates a find command instance
* @param editor - The editor instance
* @param state - The find and replace state object
*/
constructor(editor: Editor, state: FindAndReplaceState);
/** Always enabled */
isEnabled: true;
/** Does not affect document data */
affectsData: false;
/**
* Executes the find operation
* @param callbackOrText - Search term or custom search callback
* @param options - Search options (case sensitivity, whole words)
* @returns Object containing results and the search callback used
*/
execute(callbackOrText: string | FindCallback, options?: FindAttributes): {
results: Collection<FindResultType>;
findCallback: FindCallback;
};
}Usage Examples:
// Simple text search
editor.execute('find', 'search term');
// Text search with options
editor.execute('find', 'search term', {
matchCase: true,
wholeWords: false
});
// Custom search callback
const customCallback = ({ item, text }) => {
// Custom search logic
return {
results: [...],
searchText: 'custom search'
};
};
editor.execute('find', customCallback);Command for navigating to the next search result in the results collection.
/**
* Command for navigating to the next search result.
* Only enabled when there are multiple search results.
*/
class FindNextCommand extends Command {
/**
* Creates a find next command instance
* @param editor - The editor instance
* @param state - The find and replace state object
*/
constructor(editor: Editor, state: FindAndReplaceState);
/** Does not affect document data */
affectsData: false;
/** Dynamically set based on results count (enabled when >1 results) */
isEnabled: boolean;
/** Updates the enabled state based on current results */
refresh(): void;
/** Moves to the next search result */
execute(): void;
}Usage Example:
// Navigate to next result
editor.execute('findNext');
// Check if command is enabled
const command = editor.commands.get('findNext');
console.log(command.isEnabled); // true if there are multiple resultsCommand for navigating to the previous search result in the results collection.
/**
* Command for navigating to the previous search result.
* Extends FindNextCommand with reverse navigation logic.
*/
class FindPreviousCommand extends FindNextCommand {
/** Moves to the previous search result */
execute(): void;
}Usage Example:
// Navigate to previous result
editor.execute('findPrevious');Command for replacing a single search result with new text.
/**
* Command for replacing a single search result.
* Extends the base replace command with single replacement logic.
*/
class ReplaceCommand extends FindReplaceCommandBase {
/**
* Replaces a single search result with the specified text
* @param replacementText - The text to replace with
* @param result - The specific result to replace
*/
execute(replacementText: string, result: FindResultType): void;
}Usage Example:
// Replace the currently highlighted result
const state = editor.plugins.get('FindAndReplaceEditing').state;
editor.execute('replace', 'replacement text', state.highlightedResult);
// Replace a specific result
const firstResult = state.results.first;
editor.execute('replace', 'new text', firstResult);Command for replacing all occurrences of search results with new text.
/**
* Command for replacing all search results.
* Supports both text-based and result collection-based replacement.
*/
class ReplaceAllCommand extends FindReplaceCommandBase {
/**
* Replaces all occurrences matching the criteria
* @param newText - The replacement text
* @param textToReplace - Either search text or collection of results to replace
*/
execute(newText: string, textToReplace: string | Collection<FindResultType>): void;
}Usage Examples:
// Replace all occurrences of a search term
editor.execute('replaceAll', 'replacement text', 'search term');
// Replace all current search results
const state = editor.plugins.get('FindAndReplaceEditing').state;
editor.execute('replaceAll', 'new text', state.results);Abstract base class providing common functionality for replace commands.
/**
* Abstract base class for replace commands providing shared
* replacement logic and common properties.
*/
abstract class FindReplaceCommandBase extends Command {
/**
* Creates a base replace command instance
* @param editor - The editor instance
* @param state - The find and replace state object
*/
constructor(editor: Editor, state: FindAndReplaceState);
/** Always enabled */
isEnabled: true;
/** Not dependent on selection */
_isEnabledBasedOnSelection: false;
/** Abstract method to be implemented by subclasses */
abstract execute(...args: Array<unknown>): void;
/**
* Common replace logic shared between commands
* @param replacementText - The text to replace with
* @param result - The result to replace
*/
protected _replace(replacementText: string, result: FindResultType): void;
}// Perform a search, then navigate and replace
editor.execute('find', 'old text');
editor.execute('findNext');
editor.execute('replace', 'new text', state.highlightedResult);// Find and replace all in one operation
editor.execute('find', 'search term');
editor.execute('replaceAll', 'replacement', 'search term');// Create a custom command that uses find and replace
class FindAndHighlightCommand extends Command {
execute(searchTerm) {
// Use existing find command
const findResult = this.editor.execute('find', searchTerm);
// Custom highlighting logic
this.highlightResults(findResult.results);
}
}
// Register the custom command
editor.commands.add('findAndHighlight', new FindAndHighlightCommand(editor));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);
}const findCommand = editor.commands.get('find');
const findNextCommand = editor.commands.get('findNext');
// Listen to enabled state changes
findNextCommand.on('change:isEnabled', (evt, propertyName, newValue) => {
console.log('Find next enabled:', newValue);
});// Check command availability
const commands = editor.commands;
console.log('Find available:', commands.get('find').isEnabled);
console.log('Replace available:', commands.get('replace').isEnabled);
console.log('Find next available:', commands.get('findNext').isEnabled);