From 6854cb3f4d8219cf1829e32122eb2502a916eae9 Mon Sep 17 00:00:00 2001 From: Andreas Baumann Date: Sat, 1 Feb 2020 09:05:48 +0100 Subject: initial checkin --- js/ckeditor/samples/plugins/toolbar/toolbar.html | 232 +++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 js/ckeditor/samples/plugins/toolbar/toolbar.html (limited to 'js/ckeditor/samples/plugins/toolbar/toolbar.html') diff --git a/js/ckeditor/samples/plugins/toolbar/toolbar.html b/js/ckeditor/samples/plugins/toolbar/toolbar.html new file mode 100644 index 0000000..79d230b --- /dev/null +++ b/js/ckeditor/samples/plugins/toolbar/toolbar.html @@ -0,0 +1,232 @@ + + + + + + Toolbar Configuration — CKEditor Sample + + + + + + + +

+ CKEditor Samples » Toolbar Configuration +

+
+

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

+ +

By config.toolbar

+ +

+ 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' ] }
+	]
+});
+ +

By config.toolbarGroups

+ +

+ 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).
+});
+
+ + + +
+

Full toolbar configuration

+

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

+ + 

+	

+
+	
+
+	
+
+
-- 
cgit v1.2.3-70-g09d2