first commit

lib/ckeditor4/plugins/devtools/lang/_translationstatus.txt

@@ -0,0 +1,27 @@
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+
+bg.js      Found: 5 Missing: 0
+cs.js      Found: 5 Missing: 0
+cy.js      Found: 5 Missing: 0
+da.js      Found: 5 Missing: 0
+de.js      Found: 5 Missing: 0
+el.js      Found: 5 Missing: 0
+eo.js      Found: 5 Missing: 0
+et.js      Found: 5 Missing: 0
+fa.js      Found: 5 Missing: 0
+fi.js      Found: 5 Missing: 0
+fr.js      Found: 5 Missing: 0
+gu.js      Found: 5 Missing: 0
+he.js      Found: 5 Missing: 0
+hr.js      Found: 5 Missing: 0
+it.js      Found: 5 Missing: 0
+nb.js      Found: 5 Missing: 0
+nl.js      Found: 5 Missing: 0
+no.js      Found: 5 Missing: 0
+pl.js      Found: 5 Missing: 0
+tr.js      Found: 5 Missing: 0
+ug.js      Found: 5 Missing: 0
+uk.js      Found: 5 Missing: 0
+vi.js      Found: 5 Missing: 0
+zh-cn.js   Found: 5 Missing: 0

lib/ckeditor4/plugins/devtools/lang/bg.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'bg', {
+	title: 'Информация за елемента',
+	dialogName: 'Име на диалоговия прозорец',
+	tabName: 'Име на таб',
+	elementId: 'ID на елемента',
+	elementType: 'Тип на елемента'
+});

lib/ckeditor4/plugins/devtools/lang/cs.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'cs', {
+	title: 'Informace o prvku',
+	dialogName: 'Název dialogového okna',
+	tabName: 'Název karty',
+	elementId: 'ID prvku',
+	elementType: 'Typ prvku'
+});

lib/ckeditor4/plugins/devtools/lang/cy.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'cy', {
+	title: 'Gwybodaeth am yr Elfen',
+	dialogName: 'Enw ffenestr y deialog',
+	tabName: 'Enw\'r tab',
+	elementId: 'ID yr Elfen',
+	elementType: 'Math yr elfen'
+});

lib/ckeditor4/plugins/devtools/lang/da.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'da', {
+	title: 'Information på elementet',
+	dialogName: 'Dialogboks',
+	tabName: 'Tab beskrivelse',
+	elementId: 'ID på element',
+	elementType: 'Type af element'
+});

lib/ckeditor4/plugins/devtools/lang/de.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'de', {
+	title: 'Elementinformation',
+	dialogName: 'Dialogfenstername',
+	tabName: 'Reitername',
+	elementId: 'Element ID',
+	elementType: 'Elementtyp'
+});

lib/ckeditor4/plugins/devtools/lang/el.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'el', {
+	title: 'Πληροφορίες Στοιχείου',
+	dialogName: 'Όνομα παραθύρου διαλόγου',
+	tabName: 'Όνομα καρτέλας',
+	elementId: 'ID Στοιχείου',
+	elementType: 'Τύπος στοιχείου'
+});

lib/ckeditor4/plugins/devtools/lang/en.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'en', {
+	title: 'Element Information',
+	dialogName: 'Dialog window name',
+	tabName: 'Tab name',
+	elementId: 'Element ID',
+	elementType: 'Element type'
+});

lib/ckeditor4/plugins/devtools/lang/eo.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'eo', {
+	title: 'Informo pri la elemento',
+	dialogName: 'Nomo de la dialogfenestro',
+	tabName: 'Langetnomo',
+	elementId: 'ID de la elemento',
+	elementType: 'Tipo de la elemento'
+});

lib/ckeditor4/plugins/devtools/lang/et.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'et', {
+	title: 'Elemendi andmed',
+	dialogName: 'Dialoogiakna nimi',
+	tabName: 'Saki nimi',
+	elementId: 'Elemendi ID',
+	elementType: 'Elemendi liik'
+});

lib/ckeditor4/plugins/devtools/lang/fa.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'fa', {
+	title: 'اطلاعات عنصر',
+	dialogName: 'نام پنجره محاوره‌ای',
+	tabName: 'نام برگه',
+	elementId: 'ID عنصر',
+	elementType: 'نوع عنصر'
+});

lib/ckeditor4/plugins/devtools/lang/fi.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'fi', {
+	title: 'Elementin tiedot',
+	dialogName: 'Dialogi-ikkunan nimi',
+	tabName: 'Välilehden nimi',
+	elementId: 'Elementin ID',
+	elementType: 'Elementin tyyppi'
+});

lib/ckeditor4/plugins/devtools/lang/fr.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'fr', {
+	title: 'Information sur l\'élément',
+	dialogName: 'Nom de la fenêtre de dialogue',
+	tabName: 'Nom de l\'onglet',
+	elementId: 'ID de l\'élément',
+	elementType: 'Type de l\'élément'
+});

lib/ckeditor4/plugins/devtools/lang/gu.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'gu', {
+	title: 'પ્રાથમિક માહિતી',
+	dialogName: 'વિન્ડોનું નામ',
+	tabName: 'ટેબનું નામ',
+	elementId: 'પ્રાથમિક આઈડી',
+	elementType: 'પ્રાથમિક પ્રકાર'
+});

lib/ckeditor4/plugins/devtools/lang/he.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'he', {
+	title: 'מידע על האלמנט',
+	dialogName: 'שם הדיאלוג',
+	tabName: 'שם הטאב',
+	elementId: 'ID של האלמנט',
+	elementType: 'סוג האלמנט'
+});

lib/ckeditor4/plugins/devtools/lang/hr.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'hr', {
+	title: 'Informacije elementa',
+	dialogName: 'Naziv prozora za dijalog',
+	tabName: 'Naziva jahača',
+	elementId: 'ID elementa',
+	elementType: 'Vrsta elementa'
+});

lib/ckeditor4/plugins/devtools/lang/it.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'it', {
+	title: 'Informazioni elemento',
+	dialogName: 'Nome finestra di dialogo',
+	tabName: 'Nome Tab',
+	elementId: 'ID Elemento',
+	elementType: 'Tipo elemento'
+});

lib/ckeditor4/plugins/devtools/lang/nb.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'nb', {
+	title: 'Elementinformasjon',
+	dialogName: 'Navn på dialogvindu',
+	tabName: 'Navn på fane',
+	elementId: 'Element-ID',
+	elementType: 'Elementtype'
+});

lib/ckeditor4/plugins/devtools/lang/nl.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'nl', {
+	title: 'Elementinformatie',
+	dialogName: 'Naam dialoogvenster',
+	tabName: 'Tabnaam',
+	elementId: 'Element ID',
+	elementType: 'Elementtype'
+});

lib/ckeditor4/plugins/devtools/lang/no.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'no', {
+	title: 'Elementinformasjon',
+	dialogName: 'Navn på dialogvindu',
+	tabName: 'Navn på fane',
+	elementId: 'Element-ID',
+	elementType: 'Elementtype'
+});

lib/ckeditor4/plugins/devtools/lang/pl.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'pl', {
+	title: 'Informacja o elemencie',
+	dialogName: 'Nazwa okna dialogowego',
+	tabName: 'Nazwa zakładki',
+	elementId: 'ID elementu',
+	elementType: 'Typ elementu'
+});

lib/ckeditor4/plugins/devtools/lang/tr.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'tr', {
+	title: 'Eleman Bilgisi',
+	dialogName: 'İletişim pencere ismi',
+	tabName: 'Sekme adı',
+	elementId: 'Eleman ID',
+	elementType: 'Eleman türü'
+});

lib/ckeditor4/plugins/devtools/lang/ug.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'ug', {
+	title: 'ئېلېمېنت ئۇچۇرى',
+	dialogName: 'سۆزلەشكۈ كۆزنەك ئاتى',
+	tabName: 'Tab ئاتى',
+	elementId: 'ئېلېمېنت كىملىكى',
+	elementType: 'ئېلېمېنت تىپى'
+});

lib/ckeditor4/plugins/devtools/lang/uk.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'uk', {
+	title: 'Відомості про Елемент',
+	dialogName: 'Заголовок діалогового вікна',
+	tabName: 'Назва вкладки',
+	elementId: 'Ідентифікатор Елемента',
+	elementType: 'Тип Елемента'
+});

lib/ckeditor4/plugins/devtools/lang/vi.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'vi', {
+	title: 'Thông tin thành ph',
+	dialogName: 'Tên hộp tho',
+	tabName: 'Tên th',
+	elementId: 'Mã thành ph',
+	elementType: 'Loại thành ph'
+});

lib/ckeditor4/plugins/devtools/lang/zh-cn.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.setLang( 'devtools', 'zh-cn', {
+	title: '元素信息',
+	dialogName: '对话框窗口名称',
+	tabName: 'Tab 名称',
+	elementId: '元素 ID',
+	elementType: '元素类型'
+});

lib/ckeditor4/plugins/devtools/plugin.js

@@ -0,0 +1,158 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.add( 'devtools', {
+	lang: 'en,bg,cs,cy,da,de,el,eo,et,fa,fi,fr,gu,he,hr,it,ku,nb,nl,no,pl,tr,ug,uk,vi,zh-cn', // %REMOVE_LINE_CORE%
+
+	init: function( editor ) {
+		editor._.showDialogDefinitionTooltips = 1;
+	},
+	onLoad: function() {
+		CKEDITOR.document.appendStyleText( CKEDITOR.config.devtools_styles || '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +
+			'#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
+			'#cke_tooltip ul { padding: 0pt; list-style-type: none; }' );
+	}
+});
+
+(function() {
+	function defaultCallback( editor, dialog, element, tabName ) {
+		var lang = editor.lang.devtools,
+			link = '<a href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.' +
+			( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
+			'" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
+			str = '<h2>' + lang.title + '</h2>' +
+			'<ul>' +
+			'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
+			'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
+
+		if ( element )
+			str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
+
+		str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
+
+		return str + '</ul>';
+	}
+
+	function showTooltip( callback, el, editor, dialog, obj, tabName ) {
+		var pos = el.getDocumentPosition(),
+			styles = { 'z-index': CKEDITOR.dialog._.currentZIndex + 10, top: ( pos.y + el.getSize( 'height' ) ) + 'px' };
+
+		tooltip.setHtml( callback( editor, dialog, obj, tabName ) );
+		tooltip.show();
+
+		// Translate coordinate for RTL.
+		if ( editor.lang.dir == 'rtl' ) {
+			var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();
+			styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';
+		} else
+			styles.left = pos.x + 'px';
+
+		tooltip.setStyles( styles );
+	}
+
+	var tooltip;
+	CKEDITOR.on( 'reset', function() {
+		tooltip && tooltip.remove();
+		tooltip = null;
+	});
+
+	CKEDITOR.on( 'dialogDefinition', function( evt ) {
+		var editor = evt.editor;
+		if ( editor._.showDialogDefinitionTooltips ) {
+			if ( !tooltip ) {
+				tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );
+				tooltip.hide();
+				tooltip.on( 'mouseover', function() {
+					this.show();
+				});
+				tooltip.on( 'mouseout', function() {
+					this.hide();
+				});
+				tooltip.appendTo( CKEDITOR.document.getBody() );
+			}
+
+			var dialog = evt.data.definition.dialog,
+				callback = editor.config.devtools_textCallback || defaultCallback;
+
+			dialog.on( 'load', function() {
+				var tabs = dialog.parts.tabs.getChildren(),
+					tab;
+				for ( var i = 0, len = tabs.count(); i < len; i++ ) {
+					tab = tabs.getItem( i );
+					tab.on( 'mouseover', function() {
+						var id = this.$.id;
+						showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );
+					});
+					tab.on( 'mouseout', function() {
+						tooltip.hide();
+					});
+				}
+
+				dialog.foreach( function( obj ) {
+					if ( obj.type in { hbox:1,vbox:1 } )
+						return;
+
+					var el = obj.getElement();
+					if ( el ) {
+						el.on( 'mouseover', function() {
+							showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );
+						});
+						el.on( 'mouseout', function() {
+							tooltip.hide();
+						});
+					}
+				});
+			});
+		}
+	});
+})();
+
+/**
+ * A function that returns the text to be displayed inside the Developer Tools
+ * tooltip when hovering over a dialog UI element.
+ *
+ *		// This is actually the default value.
+ *		// Show dialog window name, tab ID, and element ID.
+ *		config.devtools_textCallback = function( editor, dialog, element, tabName ) {
+ *			var lang = editor.lang.devtools,
+ *				link = '<a href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.' +
+ *					( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
+ *					'.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
+ *				str =
+ *					'<h2>' + lang.title + '</h2>' +
+ *					'<ul>' +
+ *						'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
+ *						'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
+ *
+ *			if ( element )
+ *				str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
+ *
+ *			str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
+ *
+ *			return str + '</ul>';
+ *		};
+ *
+ * @since 3.6
+ * @cfg {Function} [devtools_textCallback=see example]
+ * @member CKEDITOR.config
+ * @param {CKEDITOR.editor} editor
+ * @param dialog
+ * @param element
+ * @param tabName
+ */
+
+/**
+ * A setting that stores CSS rules to be injected into the page with styles to be applied to the tooltip element.
+ *
+ *		// This is actually the default value.
+ *		CKEDITOR.config.devtools_styles =
+ *			'#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +
+ *			'#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
+ *			'#cke_tooltip ul { padding: 0pt; list-style-type: none; }';
+ *
+ * @since 3.6
+ * @cfg {String} [devtools_styles=see example]
+ * @member CKEDITOR.config
+ */

lib/ckeditor4/plugins/devtools/samples/devtools.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<title>Using DevTools Plugin &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../../../ckeditor.js"></script>
+	<link rel="stylesheet" href="../../../samples/sample.css">
+	<meta name="ckeditor-sample-name" content="Developer Tools plugin">
+	<meta name="ckeditor-sample-group" content="Plugins">
+	<meta name="ckeditor-sample-description" content="Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.">
+</head>
+<body>
+	<h1 class="samples">
+		<a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Using the Developer Tools Plugin
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure CKEditor instances to use the
+			<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
+			information about dialog window elements, including the name of the dialog window,
+			tab, and UI element. Please note that the tooltip also contains a link to the
+			<a href="http://docs.ckeditor.com/#!/api">CKEditor JavaScript API</a>
+			documentation for each of the selected elements.
+		</p>
+		<p>
+			This plugin is aimed at developers who would like to customize their CKEditor
+			instances and create their own plugins. By default it is turned off; it is
+			usually useful to only turn it on in the development phase. Note that it works with
+			all CKEditor dialog windows, including the ones that were created by custom plugins.
+		</p>
+		<p>
+			To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
+			the following JavaScript call into your code:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	<strong>extraPlugins: 'devtools'</strong>
+});</pre>
+		<p>
+			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
+			the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
+		</p>
+	</div>
+	<form action="../../../samples/sample_posteddata.php" method="post">
+		<p>
+			<label for="editor1">
+				Editor 1:
+			</label>
+			<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="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
+			<script>
+
+				// This call can be placed at any point after the
+				// <textarea>, or inside a <head><script> in a
+				// window.onload event handler.
+
+				// Replace the <textarea id="editor"> with an CKEditor
+				// instance, using default configurations.
+				CKEDITOR.replace( 'editor1', {
+					extraPlugins: 'devtools'
+				});
+
+			</script>
+		</p>
+		<p>
+			<input type="submit" value="Submit">
+		</p>
+	</form>
+	<div id="footer">
+		<hr>
+		<p>
+			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+		</p>
+		<p id="copy">
+			Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>