|
|
@@ -5,17 +5,47 @@ order: 30
|
|
|
|
|
|
# Dropdowns
|
|
|
|
|
|
+## Creating ListView dropdown with standard button
|
|
|
+
|
|
|
+```js
|
|
|
+import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
|
+
|
|
|
+import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
+
|
|
|
+const items = [
|
|
|
+ new Model( {
|
|
|
+ label: 'Do Foo',
|
|
|
+ commandName: 'foo'
|
|
|
+ } ),
|
|
|
+ new Model( {
|
|
|
+ label: 'Do Bar',
|
|
|
+ commandName: 'bar'
|
|
|
+ } ),
|
|
|
+];
|
|
|
+
|
|
|
+const dropdownView = createDropdown( locale );
|
|
|
+
|
|
|
+addListToDropdown( dropdownView, items );
|
|
|
+
|
|
|
+// Execute command when an item from the dropdown is selected.
|
|
|
+dropdownView.on( 'execute', evt => {
|
|
|
+ editor.execute( evt.source.commandName );
|
|
|
+ editor.editing.view.focus();
|
|
|
+} );
|
|
|
+```
|
|
|
+
|
|
|
## Creating Toolbar dropdown with SplitButton
|
|
|
|
|
|
```js
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
import bindOneToMany from '@ckeditor/ckeditor5-ui/src/bindings/bindonetomany';
|
|
|
-import { addToolbarToDropdown, createSplitButtonDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
+import { addToolbarToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
+import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
|
|
|
|
|
|
buttons.push( new ButtonView() );
|
|
|
buttons.push( componentFactory.create( 'someExistingButton' ) );
|
|
|
|
|
|
-const dropdownView = createSplitButtonDropdown( locale );
|
|
|
+const dropdownView = createDropdown( locale, SplitButtonView );
|
|
|
|
|
|
dropdownView.set( {
|
|
|
icon: 'some SVG',
|
|
|
@@ -32,37 +62,8 @@ bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
|
|
|
addToolbarToDropdown( dropdownView, buttons );
|
|
|
|
|
|
// Execute current action from dropdown's split button action button.
|
|
|
-dropdownView.on( 'execute', () => {
|
|
|
+dropdownView.buttonView.on( 'execute', () => {
|
|
|
editor.execute( 'command', { value: model.commandValue } );
|
|
|
editor.editing.view.focus();
|
|
|
} );
|
|
|
```
|
|
|
-
|
|
|
-## Creating ListView dropdown with standard button
|
|
|
-
|
|
|
-```js
|
|
|
-import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
|
-
|
|
|
-import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
-
|
|
|
-const items = [
|
|
|
- new Model( {
|
|
|
- label: 'Do Foo',
|
|
|
- commandName: 'foo'
|
|
|
- } ),
|
|
|
- new Model( {
|
|
|
- label: 'Do Bar',
|
|
|
- commandName: 'bar'
|
|
|
- } ),
|
|
|
-];
|
|
|
-
|
|
|
-const dropdownView = createDropdown( locale );
|
|
|
-
|
|
|
-addListToDropdown( dropdownView, items );
|
|
|
-
|
|
|
-// Execute command when an item from the dropdown is selected.
|
|
|
-dropdownView.on( 'execute', evt => {
|
|
|
- editor.execute( evt.source.commandName );
|
|
|
- editor.editing.view.focus();
|
|
|
-} );
|
|
|
-```
|