Using DevTools Plugin — CKEditor Sample

+ CKEditor Sample — Using the Developer Tools Plugin +

+ This sample shows how to configure CKEditor instances to use the + Developer Tools (devtools) 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 + CKEditor JavaScript API + documentation for each of the selected elements. +

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

+ To add a CKEditor instance using the devtools plugin, insert + the following JavaScript call into your code: +

CKEDITOR.replace( 'textarea_id',
+	{
+		extraPlugins : 'devtools'
+	});

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced with CKEditor. +

+ CKEditor requires JavaScript to run. In a browser with no JavaScript + support, like yours, you should still see the contents (HTML data) and you should + be able to edit it normally, without a rich editor interface. +

Developer Tools plugin
+ Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization. +

Index: /CKEditor/trunk/_source/plugins/devtools/lang/en.js =================================================================== --- /CKEditor/trunk/_source/plugins/devtools/lang/en.js (revision 6679) +++ /CKEditor/trunk/_source/plugins/devtools/lang/en.js (revision 6679) @@ -0,0 +1,16 @@ +/* +Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.html or http://ckeditor.com/license +*/ + +CKEDITOR.plugins.setLang( 'devtools', 'en', +{ + devTools : + { + title : 'Element Information', + dialogName : 'Dialog window name', + tabName : 'Tab name', + elementId : 'Element ID', + elementType : 'Element type' + } +}); Index: /CKEditor/trunk/_source/plugins/devtools/plugin.js =================================================================== --- /CKEditor/trunk/_source/plugins/devtools/plugin.js (revision 6679) +++ /CKEditor/trunk/_source/plugins/devtools/plugin.js (revision 6679) @@ -0,0 +1,173 @@ +/* +Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.html or http://ckeditor.com/license +*/ + +CKEDITOR.plugins.add( 'devtools', +{ + lang : [ 'en' ], + + 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 = '' + ( element ? element.type : 'content' ) + '', + str = + '

' + lang.title + '

' + + '

' + lang.dialogName + ' : ' + dialog.getName() + '
' + lang.tabName + ' : ' + tabName + '
' + lang.elementId + ' : ' + element.id + '
' + lang.elementType + ' : ' + link + '

'; + } + + 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( '', 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 tooltip when hovering over a dialog UI element. + * There are 4 parameters that are being passed into the function: editor, dialog, element, tab name. + * @name editor.config.devtools_textCallback + * @since 3.6 + * @type Function + * @default (see example) + * @example + * // This is actually the default value. + * // Show dialog name, tab id and element id. + * config.devtools_textCallback = function( editor, dialog, element, tabName ) + * { + * var lang = editor.lang.devTools, + * link = '' + ( element ? element.type : 'content' ) + '', + * str = + * '

' + lang.title + '

' + + * '

' + lang.dialogName + ' : ' + dialog.getName() + '
' + lang.tabName + ' : ' + tabName + '
' + lang.elementId + ' : ' + element.id + '
' + lang.elementType + ' : ' + link + '

'; + * } + */ + +/** + * A setting that holds CSS rules to be injected do page and contain styles to be applied to the tooltip element. + * @name CKEDITOR.config.devtools_styles + * @since 3.6 + * @type String + * @default (see example) + * @example + * // 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; } + * "; + */ Index: /CKEditor/trunk/_source/plugins/find/dialogs/find.js =================================================================== --- /CKEditor/trunk/_source/plugins/find/dialogs/find.js (revision 6678) +++ /CKEditor/trunk/_source/plugins/find/dialogs/find.js (revision 6679) @@ -629,4 +629,5 @@ { type : 'button', + id : 'btnFind', align : 'left', style : 'width:100%', @@ -694,4 +695,5 @@ { type : 'button', + id : 'btnFindReplace', align : 'left', style : 'width:100%', @@ -727,4 +729,5 @@ { type : 'button', + id : 'btnReplaceAll', align : 'left', style : 'width:100%', Index: /CKEditor/trunk/_source/plugins/forms/dialogs/select.js =================================================================== --- /CKEditor/trunk/_source/plugins/forms/dialogs/select.js (revision 6678) +++ /CKEditor/trunk/_source/plugins/forms/dialogs/select.js (revision 6679) @@ -409,4 +409,5 @@ { type : 'button', + id : 'btnAdd', style : '', label : editor.lang.select.btnAdd, @@ -432,4 +433,5 @@ { type : 'button', + id : 'btnModify', label : editor.lang.select.btnModify, title : editor.lang.select.btnModify, @@ -454,4 +456,5 @@ { type : 'button', + id : 'btnUp', style : 'width:100%;', label : editor.lang.select.btnUp, @@ -470,4 +473,5 @@ { type : 'button', + id : 'btnDown', style : 'width:100%;', label : editor.lang.select.btnDown, @@ -495,4 +499,5 @@ { type : 'button', + id : 'btnSetValue', label : editor.lang.select.btnSetValue, title : editor.lang.select.btnSetValue, @@ -508,4 +513,5 @@ { type : 'button', + id : 'btnDelete', label : editor.lang.select.btnDelete, title : editor.lang.select.btnDelete, Index: /CKEditor/trunk/_source/plugins/image/dialogs/image.js =================================================================== --- /CKEditor/trunk/_source/plugins/image/dialogs/image.js (revision 6678) +++ /CKEditor/trunk/_source/plugins/image/dialogs/image.js (revision 6679) @@ -730,4 +730,5 @@ { type : 'html', + id : 'htmlButtons', style : 'margin-top:30px;width:40px;height:40px;', onLoad : function() @@ -1060,4 +1061,5 @@ { type : 'html', + id : 'htmlPreview', style : 'width:95%;', html : '

' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'
'+ Index: /CKEditor/trunk/_source/plugins/smiley/dialogs/smiley.js =================================================================== --- /CKEditor/trunk/_source/plugins/smiley/dialogs/smiley.js (revision 6678) +++ /CKEditor/trunk/_source/plugins/smiley/dialogs/smiley.js (revision 6679) @@ -184,4 +184,5 @@ { type : 'html', + id : 'smileySelector', html : html.join( '' ), onLoad : function( event ) Index: /CKEditor/trunk/_source/plugins/templates/dialogs/templates.js =================================================================== --- /CKEditor/trunk/_source/plugins/templates/dialogs/templates.js (revision 6678) +++ /CKEditor/trunk/_source/plugins/templates/dialogs/templates.js (revision 6679) @@ -169,4 +169,5 @@ [ { + id : 'selectTplText', type : 'html', html :