Skip to content
Permalink
Browse files

Merge branch 't/9250'

  • Loading branch information...
Reinmar committed Oct 15, 2012
2 parents 76243b7 + a8439a5 commit 2dd1b683c43b461724f9afdfc016ccbf07589264
Showing with 259 additions and 10 deletions.
  1. +2 −1 plugins/button/plugin.js
  2. +62 −8 plugins/toolbar/plugin.js
  3. +3 −0 samples/index.html
  4. +5 −1 samples/sample.css
  5. +187 −0 samples/toolbar.html
@@ -257,7 +257,8 @@
*
* editorInstance.ui.addButton( 'MyBold', {
* label: 'My Bold',
* command: 'bold'
* command: 'bold',
* toolbar: 'basicstyles,1'
* } );
*
* @member CKEDITOR.ui
@@ -421,7 +421,7 @@
continue;
// Handle simply group name item.
else if ( typeof toolbarGroup == 'string' )
toolbarGroup = toolbar[ i ] = { name : toolbarGroup };
toolbarGroup = toolbar[ i ] = { name: toolbarGroup };

var items, subGroups = toolbarGroup.groups;

@@ -482,15 +482,14 @@

function fillGroup( toolbarGroup, uiItems ) {

if ( uiItems.length )
{
if ( uiItems.length ) {
if ( toolbarGroup.items )
toolbarGroup.items.push( '-' );
else
toolbarGroup.items = [];

var item;
while( ( item = uiItems.shift() ) )
while ( ( item = uiItems.shift() ) )
toolbarGroup.items.push( item.name );
}
}
@@ -501,10 +500,22 @@
if ( typeof toolbar == 'string' )
toolbar = editor.config[ 'toolbar_' + toolbar ];

// If not toolbar has been explicitly defined, build it based on the toolbarGroups.
return toolbar || buildToolbarConfig();
// If toolbar hasn't been explicitly defined, build it based on the toolbarGroups.
return ( editor.toolbar = toolbar || buildToolbarConfig() );
}

/**
* Add toolbar group. See {@link CKEDITOR.config#toolbarGroups} for more details.
*
* **Note:** This method won't modify toolbar groups set explicitly by
* {@link CKEDITOR.config#toolbarGroups}. It will extend only default setting.
*
* @param {String} name Group name.
* @param {Number/String} previous Name of group after which this one
* should be added or `0` if this group should be the first one.
* @param {String} [subgroupOf] Name of parent group.
* @member CKEDITOR.ui
*/
CKEDITOR.ui.prototype.addToolbarGroup = function( name, previous, subgroupOf ) {
// The toolbarGroups from the privates is the one we gonna use for automatic toolbar creation.
var toolbarGroups = getPrivateToolbarGroups( this.editor ),
@@ -561,7 +572,7 @@
return editor._.toolbarGroups || ( editor._.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
@@ -602,7 +613,8 @@ CKEDITOR.config.toolbarLocation = 'top';
* The toolbox (alias toolbar) definition. It is a toolbar name or an array of
* toolbars (strips), each one being also an array, containing a list of UI items.
*
* If set to `null`, generate toolbar automatically using all available buttons.
* If set to `null`, generate toolbar automatically using all available buttons
* and {@link #toolbarGroups} as a toolbar groups layout.
*
* // Defines a toolbar with only one strip containing the "Source" button, a
* // separator and the "Bold" and "Italic" buttons.
@@ -624,6 +636,39 @@ CKEDITOR.config.toolbarLocation = 'top';
* @member CKEDITOR.config
*/

/**
* The toolbar groups definition.
*
* If toolbar layout isn't explicitly defined by {@link #toolbar} setting, then
* this setting is used to group all defined buttons (see {@link CKEDITOR.ui#addButton}).
* Buttons are associated with toolbar groups by `toolbar` property in their definition objects.
*
* New groups may be dynamically added during the editor and plugins initialization by
* {@link CKEDITOR.ui#addToolbarGroup}. Although only if default setting was used.
*
* // Default setting.
* config.toolbarGroups = [
* { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
* { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
* { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
* { name: 'forms' },
* '/',
* { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
* { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
* { name: 'links' },
* { name: 'insert' },
* '/',
* { name: 'styles' },
* { name: 'colors' },
* { name: 'tools' },
* { name: 'others' },
* { name: 'about' }
* ];
*
* @cfg {Array} [toolbarGroups=see example]
* @member CKEDITOR.config
*/

/**
* Whether the toolbar can be collapsed by the user. If disabled, the collapser
* button will not be displayed.
@@ -655,3 +700,12 @@ CKEDITOR.config.toolbarLocation = 'top';
* @cfg {Boolean} [toolbarGroupCycling=true]
* @member CKEDITOR.config
*/

/**
* Toolbar definition used by the editor. It is crated from the
* {@link CKEDITOR.config#toolbar} if it is set or automatically
* based on {@link CKEDITOR.config#toolbarGroups}.
*
* @property {Object} toolbar
* @member CKEDITOR.editor
*/
@@ -41,6 +41,9 @@ <h2 class="samples">

<dt><a class="samples" href="uilanguages.html">User Interface languages</a></dt>
<dd>Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.</dd>

<dt><a class="samples" href="toolbar.html">Toolbar configuration</a> <span class="new">New!</span></dt>
<dd>Configuring CKEditor to display full or custom toolbar layout.</dd>
</dl>

<h2 class="samples">
@@ -81,7 +81,7 @@ h2.samples
{
color: #000000;
font-size: 130%;
margin: 0;
margin: 15px 0 0 0;
padding: 0;
}

@@ -135,6 +135,10 @@ pre.samples
border: 1px solid #D7D7D7;
overflow: auto;
padding: 0.25em;
-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
tab-size: 4;
}

#footer
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html>
<head>
<title>Toolbar Configuration &mdash; CKEditor Sample</title>
<meta charset="utf-8">
<script src="../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Toolbar Configuration
</h1>

<div class="description">
<p>
This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if
current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.
</p>

<p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>

<h2 class="samples">By <a href="http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>

<p>
You can explicitly define which buttons are displayed in which groups and in which order.
This is the more precise setting, but less flexible. If newly added plugin adds its
own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.
</p>

<p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>

<pre class="samples">
CKEDITOR.replace( <em>'textarea_id'</em>, {
<strong>toolbar:</strong> [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
'/', // Line break - next group will be placed in new line.
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
});</pre>

<h2 class="samples">By <a href="http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>

<p>
You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>
and <code>forms</code>) are displayed and in which order. Registered buttons are associated
with toolbar groups by <code>toolbar</code> property in their definition.
This setting's advantage is that you don't have to modify toolbar configuration
when adding/removing plugins which register their own buttons.
</p>

<p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>

<pre class="samples">
CKEDITOR.replace( <em>'textarea_id'</em>, {
<strong>toolbarGroups:</strong> [
{ name: 'document', groups: [ 'mode', 'document' ] }, // Displays document group with its two subgroups.
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, // Group's name will be used to create voice label.
'/', // Line break - next group will be placed in new line.
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'links' }
]

// NOTE: Remember to leave 'toolbar' property with the default value (null).
});</pre>
</div>

<div id="currentToolbar" style="display: none">
<h2 class="samples">Current toolbar configuration</h2>
<p>Below you can see editor with current toolbar definition.</p>
<textarea cols="80" id="editorCurrent" name="editorCurrent" 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>
<pre id="editorCurrentCfg" class="samples"></pre>
</div>

<div id="fullToolbar">
<h2 class="samples">Full toolbar configuration</h2>
<p>Below you can see editor with full toolbar, generated automatically by the editor.</p>
<p>
<strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.
Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.
</p>
<textarea cols="80" id="editorFull" name="editorFull" 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>
<pre id="editorFullCfg" class="samples"></pre>
</div>

<script>
(function() {
'use strict';
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor,
editorCurrent = editor.name == 'editorCurrent',
defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups ),
pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),
output = '';
if ( editorCurrent ) {
// If default toolbar configuration has been modified, show "current toolbar" section.
if ( !defaultToolbar )
CKEDITOR.document.getById( 'currentToolbar' ).show();
else
return;
}
// Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.
if ( !editor.config.toolbar ) {
output +=
'// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +
dumpToolbarConfiguration( editor ) +
'\n\n' +
'// Toolbar groups configuration.\n' +
dumpToolbarConfiguration( editor, true )
}
// Toolbar groups doesn't count in this case - print only toolbar.
else {
output += '// Toolbar configuration.\n' +
dumpToolbarConfiguration( editor );
}
pre.setHtml( output );
} );
CKEDITOR.replace( 'editorCurrent', { height: 100 } );
CKEDITOR.replace( 'editorFull', {
// Reset toolbar settings, so full toolbar will be generated automatically.
toolbar: null,
toolbarGroups: null,
height: 100
} );
function dumpToolbarConfiguration( editor, printGroups ) {
var output = [],
toolbar = editor.toolbar;
for ( var i = 0; i < toolbar.length; ++i ) {
output.push( dumpToolbarGroup( toolbar[ i ], printGroups ) );
}
return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];';
}
function dumpToolbarGroup( group, printGroups ) {
var output = [];
if ( typeof group == 'string' )
return '\'' + group + '\'';
if ( CKEDITOR.tools.isArray( group ) )
return dumpToolbarItems( group );
if ( group.name )
output.push( 'name: \'' + group.name + '\'' );
if ( group.groups )
output.push( 'groups: ' + dumpToolbarItems( group.groups ) );
if ( !printGroups )
output.push( 'items: ' + dumpToolbarItems( group.items ) );
return '{ ' + output.join( ', ' ) + ' }';
}
function dumpToolbarItems( items ) {
if ( typeof items == 'string' )
return '\'' + items + '\'';
return '[ \'' + items.join( '\', \'' ) + '\' ]';
}
})();
</script>

<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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

0 comments on commit 2dd1b68

Please sign in to comment.
You can’t perform that action at this time.