8
0
Pārlūkot izejas kodu

Add docs about block toolbar grouping

panr 5 gadi atpakaļ
vecāks
revīzija
ef743f1de0

+ 27 - 1
packages/ckeditor5-ui/docs/features/blocktoolbar.md

@@ -51,7 +51,7 @@ To add this feature to your editor install the [`@ckeditor/ckeditor5-ui`](https:
 npm install --save @ckeditor/ckeditor5-ui
 ```
 
-And add it to your plugin list:
+Add it to your plugin list and define its items directly through the `blockToolbar` param:
 
 ```js
 import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar';
@@ -74,6 +74,32 @@ BalloonEditor
 	.catch( ... );
 ```
 
+You can also extend the `blockToolbar` configuration by setting the `shouldNotGroupWhenFull` option to prevent automatic items grouping:
+
+```js
+import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar';
+import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
+import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
+
+BalloonEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ BlockToolbar, ParagraphButtonUI, HeadingButtonsUI, ... ],
+		blockToolbar: {
+			items: [
+				'paragraph', 'heading1', 'heading2', 'heading3',
+				'|',
+				'bulletedList', 'numberedList',
+				'|',
+				'blockQuote', 'imageUpload'
+			],
+			shouldNotGroupWhenFull: true
+		},
+		toolbar: [ ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
 <info-box info>
 	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
 </info-box>

+ 12 - 0
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -489,6 +489,18 @@ export default class BlockToolbar extends Plugin {
  *			blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
  *		};
  *
+ * ## Configuring items grouping
+ *
+ * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+ *
+ *		const config = {
+ *			blockToolbar: {
+ *				items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+ *				shouldNotGroupWhenFull: true
+ *			},
+ *		};
+ *
+ *
  * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  *
  * @member {Array.<String>|Object} module:core/editor/editorconfig~EditorConfig#blockToolbar