Преглед на файлове

ImageStyle adds all styles buttons to ImageToolbar if no other configuration is provided.

Szymon Kupś преди 9 години
родител
ревизия
8f444c4bac

+ 7 - 0
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -35,6 +35,13 @@ export default class ImageStyle extends Plugin {
 		for ( let style of styles ) {
 			this._createButton( style );
 		}
+
+		// If there is no default image toolbar configuration, add all style buttons.
+		const imageToolbarConfig = this.editor.config.get( 'image.toolbar' );
+
+		if ( !imageToolbarConfig ) {
+			this.editor.config.set( 'image.toolbar', styles.map( style => style.name ) );
+		}
 	}
 
 	/**

+ 7 - 2
packages/ckeditor5-image/src/imagetoolbar.js

@@ -52,8 +52,14 @@ export default class ImageToolbar extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
-	init() {
+	afterInit() {
 		const editor = this.editor;
+		const toolbarConfig = editor.config.get( 'image.toolbar' );
+
+		// Don't add the toolbar if there is no configuration.
+		if ( !toolbarConfig ) {
+			return;
+		}
 
 		// Create a plain toolbar instance.
 		const toolbar = new ToolbarView();
@@ -74,7 +80,6 @@ export default class ImageToolbar extends Plugin {
 
 		return editor.ui.view.body.add( panel ).then( () => {
 			const editingView = editor.editing.view;
-			const toolbarConfig = editor.config.get( 'image.toolbar' );
 			const promises = [];
 
 			if ( toolbarConfig ) {

+ 22 - 0
packages/ckeditor5-image/tests/imagestyle/imagestyle.js

@@ -67,4 +67,26 @@ describe( 'ImageStyle', () => {
 			spy.reset();
 		}
 	} );
+
+	it( 'should add buttons to image toolbar if there is no default configuration', () => {
+		const toolbarConfig =  editor.config.get( 'image.toolbar' );
+
+		expect( toolbarConfig ).to.eql( styles.map( style => style.name ) );
+	} );
+
+	it( 'should not add buttons to image toolbar if configuration is present', () => {
+		const editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ ImageStyle ],
+			image: {
+				styles,
+				toolbar: [ 'foo', 'bar' ]
+			}
+		} )
+		.then( newEditor => {
+			expect( newEditor.config.get( 'image.toolbar' ) ).to.eql( [ 'foo',  'bar' ] );
+		} );
+	} );
 } );

+ 2 - 5
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -17,11 +17,8 @@ import ImageStyle from 'ckeditor5/image/imagestyle/imagestyle.js';
 import ImageToolbar from 'ckeditor5/image/imagetoolbar.js';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageStyle, ImageToolbar ],
-	toolbar: [ 'headings', 'undo', 'redo' ],
-	image: {
-		toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
-	}
+	plugins: [ ImageToolbar, EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageStyle ],
+	toolbar: [ 'headings', 'undo', 'redo' ]
 } )
 	.then( editor => {
 		window.editor = editor;