Find and Replace Documentation

Searching and replacing capabilities in CKEditor 4 are provided by the Find and Replace plugin which is available for download or can be added via the Online Builder.

Find and Replace Demo

Use the sample editor below to test the feature in action.

<h2>Diesel locos are really useful!</h2>
				<img alt="Diesel locomotives waiting at a small freight station." src="https://ckeditor.com/docs/ckeditor5/latest/assets/img/diesel_locos.jpg" style="float:right; height:223px; width:300px" />
				Diesel locomotives waiting at a small freight station.
				A diesel locomotive is one that uses a diesel engine as the prime source of power to move and pull the cars.
				Diesel locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica maybe, where the railway network is rather scarce). Being powerful and not requiring additional technical infrastructure like their younger siblings &mdash; the electric locomotives &mdash; diesel engines are perfect for most types of tasks.
				Diesel engines can pull passenger trains, boxcars with goods, tank cars, platform wagons with wood logs... Should the conditions be tough and the load be too heavy for a single diesel locomotive, that can be put together in a pair of engines. And sometimes you can even see three of four of them if the job is exceptionally demanding.
				Most national and private railway companies nowadays own or lease a multitude of diesel engines, ranging from small, nimble ones used for maneuvering on the station to the bulky, large ones for the cross-continental trail.
				Diesel engines also come in all shapes and all colors, making up a happy useful bunch.

Get Sample Source Code

Find and Replace

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Find and Replace</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="40">&lt;h2&gt;Diesel locos are really useful!&lt;/h2&gt;
&lt;p&gt;&lt;img alt="Diesel locomotives waiting at a small freight station." src="https://ckeditor.com/docs/ckeditor5/latest/assets/img/diesel_locos.jpg" style="float:right; height:223px; width:300px" /&gt;&lt;/p&gt;
&lt;p&gt;Diesel locomotives waiting at a small freight station.&lt;/p&gt;
&lt;p&gt;A diesel locomotive is one that uses a diesel engine as the prime source of power to move and pull the cars.&lt;/p&gt;
&lt;p&gt;Diesel locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica maybe, where the railway network is rather scarce). Being powerful and not requiring additional technical infrastructure like their younger siblings &amp;mdash; the electric locomotives &amp;mdash; diesel engines are perfect for most types of tasks.&lt;/p&gt;
&lt;p&gt;Diesel engines can pull passenger trains, boxcars with goods, tank cars, platform wagons with wood logs... Should the conditions be tough and the load be too heavy for a single diesel locomotive, that can be put together in a pair of engines. And sometimes you can even see three of four of them if the job is exceptionally demanding.&lt;/p&gt;
&lt;p&gt;Most national and private railway companies nowadays own or lease a multitude of diesel engines, ranging from small, nimble ones used for maneuvering on the station to the bulky, large ones for the cross-continental trail.&lt;/p&gt;
&lt;p&gt;Diesel engines also come in all shapes and all colors, making up a happy useful bunch.&lt;/p&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      plugins: 'wysiwygarea,toolbar,basicstyles,format,stylescombo,find,link,image',
      height: 450,
      toolbar: [{
          name: 'find',
          items: ['Find', 'Replace']
        },
        {
          name: 'document',
          items: ['Undo', 'Redo']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Strike']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        },
        {
          name: 'insert',
          items: ['Image']
        },
        {
          name: 'styles',
          items: ['Format', 'Styles']
        }
      ]
    });
  </script>
</body>

</html>