Contribute to this guideReport an issue

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

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.24.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>