X-Git-Url: https://scm.cri.ensmp.fr/git/ckeditor.git/blobdiff_plain/e11f66eb655db8339a2d9b197b89f6c3b26099e1..579f65bc95a773bc6f8da75f6849ea49f365368b:/skins/ckeditor/samples/plugins/toolbar/toolbar.html diff --git a/skins/ckeditor/samples/plugins/toolbar/toolbar.html b/skins/ckeditor/samples/plugins/toolbar/toolbar.html new file mode 100644 index 0000000..6cf2ddf --- /dev/null +++ b/skins/ckeditor/samples/plugins/toolbar/toolbar.html @@ -0,0 +1,232 @@ + + + +
+ ++ This sample page demonstrates editor with loaded full toolbar (all registered buttons) and, if + current editor's configuration modifies default settings, also editor with modified toolbar. +
+ +Since CKEditor 4 there are two ways to configure toolbar buttons.
+ +
+ 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 config.toolbar
setting as well.
+
To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:
+ ++CKEDITOR.replace( 'textarea_id', { + toolbar: [ + { 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' ] } + ] +});+ +
+ You can define which groups of buttons (like e.g. basicstyles
, clipboard
+ and forms
) are displayed and in which order. Registered buttons are associated
+ with toolbar groups by toolbar
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.
+
To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:
+ ++CKEDITOR.replace( 'textarea_id', { + toolbarGroups: [ + { 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). +});+
Below you can see editor with full toolbar, generated automatically by the editor.
+
+ Note: To create editor instance with full toolbar you don't have to set anything.
+ Just leave toolbar
and toolbarGroups
with the default, null
values.
+