CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Proofreading, Spelling and Grammar Checking Documentation

The Standard and Full CKEditor 4 packages include the integrated spell checking functionality. It is an out-of-the-box solution provided by the third-party plugin, SpellCheckAsYouType (SCAYT), that uses the WebSpellChecker web service.

When either of the plugins is enabled, the   button is automatically added to the toolbar. Depending on which plugin you use, it may contain numerous SCAYT options and open the Spell Checker dialog window.

The out-of-the-box spell checking functionality is ad-supported. If you want to remove the ads, you can purchase a license here.

Spell Check As You Type (SCAYT)

The SpellCheckAsYouType (SCAYT) plugin checks the spelling of the text in the editing area immediately as you type it and marks all errors with a red line. By default it needs to be enabled by choosing Enable SCAYT from the   toolbar button, but you can also configure SCAYT to start automatically on editor loading, like in the editor instance below.

Distraction-free Proofreader

WProofreader is an innovative proofreading tool that combines the functionality of "spell check as you type" and "spell check in a dialog" in a modern UI. Spelling and grammar suggestions are available on hover with no clicking needed. The distraction-free badge gives you access to proofreader suggestions, settings and proofreading overview in a dialog.

Using Native Browser Spell Checker

By default, browser spell check functionality is disabled. Set the config.disableNativeSpellChecker configuration option to false to enable it. If the Context Menu plugin is enabled, it is necessary to hold the Ctrl key when right-clicking misspelled words to see the suggested corrections.

Get Sample Source Code

  • Spell Check As You Type (SCAYT) 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Spell Check As You Type (SCAYT)</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="10">&lt;h1&gt;Apollo 11&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Apollo 11&lt;/strong&gt; was the spacflight that landed the first humans, Americans &lt;a href="http://en.wikipedia.org/wiki/Neil_Armstrong"&gt;Neil Armstrong&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Buzz_Aldrin"&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on july 20, 1969, at 20:18 UTC. Armstrong became the firrst to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt;

&lt;p&gt;Armstrong spent about two a half hours outside the spacecraft, Aldrin slightely less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)"&gt;Michael Collins&lt;/a&gt;, pilloted the &lt;a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module"&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt;

&lt;hr /&gt;
&lt;p&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      height: 250,
      // Configure SCAYT to load on editor startup.
      scayt_autoStartup: true,
      grayt_autoStartup: true,
      // Limit the number of suggestions available in the context menu.
      scayt_maxSuggestions: 3,
      scayt_customerId: '1:Eebp63-lWHbt2-ASpHy4-AYUpy2-fo3mk4-sKrza1-NsuXy4-I1XZC2-0u2F54-aqYWd1-l3Qf14-umd',
      scayt_sLang: 'en_US',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Distraction-free proofreader 
    <!doctype html>
<html lang="en">

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

<body>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;h1&gt;Apollo 11&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Apollo 11&lt;/strong&gt; was the spacflight that landed the first humans, Americans &lt;a href="http://en.wikipedia.org/wiki/Neil_Armstrong"&gt;Neil Armstrong&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Buzz_Aldrin"&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on july 20, 1969, at 20:18 UTC. Armstrong became the firrst to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt;

&lt;p&gt;Armstrong spent about two a half hours outside the spacecraft, Aldrin slightely less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)"&gt;Michael Collins&lt;/a&gt;, pilloted the &lt;a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module"&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt;

&lt;hr /&gt;
&lt;p&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
  <script>
    window.WEBSPELLCHECKER_CONFIG = {
      autoSearch: true,
      enableAutoSearchIn: ['.cke_wproofreader'],
      enableGrammar: true,
      serviceId: '1:Eebp63-lWHbt2-ASpHy4-AYUpy2-fo3mk4-sKrza1-NsuXy4-I1XZC2-0u2F54-aqYWd1-l3Qf14-umd',
      lang: 'auto'
    };

    CKEDITOR.replace('editor2', {
      height: 250,
      // Remove the SpellCheckAsYouType (SCAYT) plugin.
      removePlugins: 'scayt',
      on: {
        // Add a special class to the editor iframe so WProofreader will only be initialized on this
        // particular instance (see 'enableAutoSearchIn' in 'WEBSPELLCHECKER_CONFIG' above).
        instanceReady: function(evt) {
          evt.editor.container.findOne('iframe').addClass('cke_wproofreader');
        }
      },
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Native browser spell checker 
    <!doctype html>
<html lang="en">

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

<body>
  <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;h1&gt;Apollo 11&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Apollo 11&lt;/strong&gt; was the spacflight that landed the first humans, Americans &lt;a href="http://en.wikipedia.org/wiki/Neil_Armstrong"&gt;Neil Armstrong&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Buzz_Aldrin"&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on july 20, 1969, at 20:18 UTC. Armstrong became the firrst to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt;

&lt;p&gt;Armstrong spent about two a half hours outside the spacecraft, Aldrin slightely less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)"&gt;Michael Collins&lt;/a&gt;, pilloted the &lt;a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module"&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt;

&lt;hr /&gt;
&lt;p&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor3', {
      height: 250,
      // Remove the SpellCheckAsYouType (SCAYT) plugin.
      removePlugins: 'scayt',
      disableNativeSpellChecker: false,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>