Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (69 sloc) 4.39 KB
<!DOCTYPE html>
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see or
<meta charset="utf-8">
<meta name="description" content="Developer Tools for CKEditor. Useful when customizing editor dialog windows.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, developer, tools, helper, help, dialog, dialogs, window, windows, tab, field, customization, customize, customisation, customise">
<meta name="sdk-samples" content="Developer tools">
<meta name="sdk-category" content="sdk-utilities">
<meta name="sdk-order" content="10">
<title>Developer Tools</title>
<link href=",500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<link rel="icon" href="../template/theme/img/favicon.ico">
<header class="sdk-header">
<section class="sdk-container">
<nav class="sdk-sidebar">
<section class="sdk-contents">
<h1>Developer Tools <a class="documentation" href="">Documentation</a></h1>
The optional <a href="">Developer Tools</a> plugin makes it possible to configure CKEditor to <strong>display information about dialog window elements</strong>, including the name of the dialog window and its tabs as well as the ID and type of each dialog window UI element.
<strong>This feature is only useful in the development phase</strong> 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 <a href="">Using Developer Tools to Customize Dialog Windows</a> article to learn more about this feature.
<textarea cols="80" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>
&lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;Apollo 11&lt;/strong&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;;&gt;Neil Armstrong&lt;/a&gt; and
&lt;a href=&quot;;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first 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 &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly 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=&quot;;&gt;Michael Collins&lt;/a&gt;, piloted the
&lt;a href=&quot;;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to
<script data-sample="1">
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'
} );
<footer class="sdk-footer">
You can’t perform that action at this time.