Contribute to this guideReport an issue

Developer Tools Documentation

The optional Developer Tools plugin makes it possible to configure CKEditor to display information about dialog window elements, including the name of the dialog window and its tabs as well as the ID and type of each dialog window UI element.

This feature is only useful in the development phase and should not be used in production environment. Note that it works with all CKEditor dialog windows, including the ones that were created by custom plugins, so you can use it both when customizing official CKEditor plugins and creating your own ones!

The following sample presents a classic editor instance with with the Developer Tools plugin enabled. Open any of the editor dialog windows and hover its field or tab with your mouse to see the tooltip. Refer to the Using Developer Tools to Customize Dialog Windows article to learn more about this feature.

Get Sample Source Code

  • Developer tools
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Developer tools</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" 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.config.devtools_styles =
          '#cke_tooltip { line-height: 20px; font-size: 12px; padding: 5px; border: 2px solid #333; background: #ffffff }' +
          '#cke_tooltip h2 { font-size: 14px; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
          '#cke_tooltip ul { padding: 0pt; list-style-type: none; }';
    
        CKEDITOR.replace('editor1', {
          height: 250,
          extraPlugins: 'devtools'
        });
      </script>
    </body>
    
    </html>