Bladeren bron

Fix: The bootstrap (external UI) example is up.

Maciej Gołaszewski 7 jaren geleden
bovenliggende
commit
ac71aaa203
1 gewijzigde bestanden met toevoegingen van 28 en 8 verwijderingen
  1. 28 8
      packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

+ 28 - 8
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -218,37 +218,58 @@ class BootstrapEditorUI {
 		const dropdownMenu = this.view.dropdownMenu;
 		const dropdownMenu = this.view.dropdownMenu;
 		const dropdownToggle = this.view.dropdownToggle;
 		const dropdownToggle = this.view.dropdownToggle;
 
 
+		// Retrieve the editor commands for heading and paragraph.
+		const headingCommand = editor.commands.get( 'heading' );
+		const paragraphCommand = editor.commands.get( 'paragraph' );
+
 		// Create a dropdown menu entry for each heading configuration option.
 		// Create a dropdown menu entry for each heading configuration option.
 		editor.config.get( 'heading.options' ).map( option => {
 		editor.config.get( 'heading.options' ).map( option => {
-			// Retrieve the editor command corresponding with the configuration option.
-			const command = editor.commands.get( option.model );
+			// Check is options is paragraph or heading as their commands slightly differ.
+			const isParagraph = option.model === 'paragraph';
 
 
 			// Create the menu item DOM element.
 			// Create the menu item DOM element.
 			const menuItem = $(
 			const menuItem = $(
 				`<a href="#" class="dropdown-item heading-item_${ option.model }">` +
 				`<a href="#" class="dropdown-item heading-item_${ option.model }">` +
-					`${ option.title }` +
+				`${ option.title }` +
 				'</a>' );
 				'</a>' );
 
 
-			// Upon click, the dropdown menua item should execute the command and focus
+			// Upon click, the dropdown menu item should execute the command and focus
 			// the editing view to keep the editing process uninterrupted.
 			// the editing view to keep the editing process uninterrupted.
 			menuItem.click( () => {
 			menuItem.click( () => {
-				editor.execute( option.model );
+				const commandName = isParagraph ? 'paragraph' : 'heading';
+				const commandValue = isParagraph ? undefined : { value: option.model };
+
+				editor.execute( commandName, commandValue );
 				editor.editing.view.focus();
 				editor.editing.view.focus();
 			} );
 			} );
 
 
 			dropdownMenu.append( menuItem );
 			dropdownMenu.append( menuItem );
 
 
+			const command = isParagraph ? paragraphCommand : headingCommand;
+
 			// Make sure the dropdown and its items reflect the state of the
 			// Make sure the dropdown and its items reflect the state of the
 			// currently active command.
 			// currently active command.
+			const onValueChange = isParagraph ? onValueChangeParagraph : onValueChangeHeading;
 			command.on( 'change:value', onValueChange );
 			command.on( 'change:value', onValueChange );
 			onValueChange();
 			onValueChange();
 
 
 			// Heading commands can become disabled, e.g. when the editor is read-only.
 			// Heading commands can become disabled, e.g. when the editor is read-only.
 			// Make sure the UI reflects this state change.
 			// Make sure the UI reflects this state change.
 			command.on( 'change:isEnabled', onIsEnabledChange );
 			command.on( 'change:isEnabled', onIsEnabledChange );
+
 			onIsEnabledChange();
 			onIsEnabledChange();
 
 
-			function onValueChange() {
+			function onValueChangeHeading() {
+				const isActive = !isParagraph && command.value === option.model;
+
+				if ( isActive ) {
+					dropdownToggle.children( ':first' ).text( option.title );
+				}
+
+				menuItem.toggleClass( 'active', isActive );
+			}
+
+			function onValueChangeParagraph() {
 				if ( command.value ) {
 				if ( command.value ) {
 					dropdownToggle.children( ':first' ).text( option.title );
 					dropdownToggle.children( ':first' ).text( option.title );
 				}
 				}
@@ -268,7 +289,7 @@ BootstrapEditor
 	.create( $( '#editor' ).get( 0 ), {
 	.create( $( '#editor' ).get( 0 ), {
 		plugins: [
 		plugins: [
 			Clipboard, Enter, Typing, Paragraph, EasyImage,
 			Clipboard, Enter, Typing, Paragraph, EasyImage,
-			BoldEditing, ItalicEditing, UnderlineEditing, HeadingEditing, UndoEditing,
+			BoldEditing, ItalicEditing, UnderlineEditing, HeadingEditing, UndoEditing
 		],
 		],
 		cloudServices: CS_CONFIG
 		cloudServices: CS_CONFIG
 	} )
 	} )
@@ -282,4 +303,3 @@ BootstrapEditor
 	.catch( err => {
 	.catch( err => {
 		console.error( err.stack );
 		console.error( err.stack );
 	} );
 	} );
-