8
0
فهرست منبع

Fix: Set balloon toolbar's max-width to be half of the editable's width and make it groupable

panr 6 سال پیش
والد
کامیت
72960ad080
1فایلهای تغییر یافته به همراه7 افزوده شده و 1 حذف شده
  1. 7 1
      packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

+ 7 - 1
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -147,7 +147,7 @@ export default class BalloonToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
-		const toolbarView = new ToolbarView( this.editor.locale );
+		const toolbarView = new ToolbarView( this.editor.locale, { shouldGroupWhenFull: true } );
 
 		toolbarView.extendTemplate( {
 			attributes: {
@@ -189,6 +189,12 @@ export default class BalloonToolbar extends Plugin {
 			this._balloon.updatePosition( this._getBalloonPositionData() );
 		} );
 
+		// Set toolbar's max-width to be half of the editable's width.
+		const editableRect = new Rect( this.editor.editing.view.getDomRoot() );
+		const maxToolbarWidth = editableRect.width / 2;
+
+		this.toolbarView.element.style.maxWidth = `${ maxToolbarWidth }px`;
+
 		// Add the toolbar to the common editor contextual balloon.
 		this._balloon.add( {
 			view: this.toolbarView,