An original venue notice renames “East studio” to “Garden studio.” The visible name appears in a heading and two paragraphs, but a booking link still points to /rooms/east-studio. An editor needs to revise the wording and then check the destination separately. Replacing visible document text should not be presented as a migration of room records or URLs.
Install the feature in the existing document editor
For a compatible npm-based CKEditor application, add the imported feature to the existing plugin list:
import { FindAndReplace } from 'ckeditor5';
const noticeSearchOptions = {
findAndReplace: { uiType: 'dialog' }
};
Include FindAndReplace in plugins and findAndReplace in toolbar, then merge noticeSearchOptions into the configuration. Keep the existing document plugins, styles, license configuration, and initialization. The fragment is an addition to an editor, not a standalone build.
The default dialog can remain open while the author edits the document. Set uiType to dropdown if the application deliberately chooses that presentation. The interface choice does not change which stored notice the application should save.
Review the visible wording and destination as separate fields
Load this fictional development fixture using an editor that supports its heading and link content:
<h2>East studio access</h2>
<p>Meet the host in the East studio.</p>
<p><a href="/rooms/east-studio">Book the East studio</a></p>
Open Find and Replace, search for East studio, and inspect the three visible occurrences before applying a replacement. Check the interface's matching options when other names could overlap. The official feature guide also documents a command for starting a search from the application:
noticeEditor.execute('find', 'East studio');
Here noticeEditor refers to the initialized notice instance with the feature installed. This searches the editor document. Browser Find may also match navigation labels outside it, and a source-code search can include HTML comments and attribute values. The CodeMirror source-search guide covers that different editing surface.
Confirm the replacement argument order
The official example passes the replacement first and the search text second to replaceAll. For the fixture, its shape is:
noticeEditor.execute('replaceAll', 'Garden studio', 'East studio');
Use that only after reviewing the active search and the intended matches in your integration. Prefer the interface's individual replacement controls when different occurrences need different wording. A document-wide replacement cannot decide whether an old name in a quotation or historical paragraph should remain.
After editing, read the heading, meeting instruction, and link label. Inspect the link destination through the editor's link controls and the saved HTML. Decide with the venue's authoritative room record whether /rooms/east-studio remains correct or needs a separate update. Do not mechanically derive a new URL from the replacement label.
Reopen the notice and follow its booking link
Capture noticeEditor.getData() through the application's existing save operation. Reopen that same notice and search again for the old visible name. Inspect any remaining occurrences deliberately rather than treating a zero count as proof that the notice is correct.
Read the saved visitor version and follow the booking link. The heading and paragraphs should use the approved room name, and the destination should open the intended room. That final link check catches a mistake that a successful text replacement cannot reveal.