Using Placeholders Documentation

The optional Placeholder plugin makes it possible to insert read-only elements into the editor content. It was reworked in CKEditor 4.3 and is now available as an inline widget.

When the Placeholder plugin is enabled, the button is automatically added to the toolbar. Once clicked, it opens the Placeholder Properties dialog window that lets you add the placeholder text. After the placeholder is inserted into the document, the user will only be able to edit its text through the plugin dialog window. Refer to the Using Placeholders article to learn more about this feature.

Related Features

Styling and Formatting – Applying Styles to Editor Content

Get Sample Source Code

Using placeholders

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

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Using placeholders</title>
  <script src="https://cdn.ckeditor.com/4.25.0-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: 'placeholder',
      height: 220,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>