CKEditor 4 reached its End of Life (EOL) in June 2023. From then on, it will receive no more updates, new features, bug fixes, and security patches. Visit CKEditor 5 Docs for the actively supported CKEditor or check Extended Support Model.

Home/CKEditor 4/Examples

Using the Editor Placeholder Documentation

The Editor Placeholder plugin allows you to display a placeholder text when the editor content is empty. The placeholder helps users locate the editor in the application and prompts to input the content. It works similarly to the native DOM placeholder attribute used by inputs.

Rich Text Editor, editor1

Editor toolbars

Press ALT 0 for help

◢Elements path

Get Sample Source Code

Editor Placeholder

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

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

<body>
  <textarea cols="10" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      extraPlugins: 'editorplaceholder',
      editorplaceholder: 'Start typing here...',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>