浏览代码

Add table height & width commands.

Maciej Gołaszewski 5 年之前
父节点
当前提交
221b7422d2

+ 80 - 0
packages/ckeditor5-table/src/commands/tableheightcommand.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/commands/tableheightcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor } from './utils';
+
+/**
+ * The table height command.
+ *
+ * The command is registered by {@link module:table/tablepropertiesediting~TablePropertiesEditing} as
+ * `'tableHeight'` editor command.
+ *
+ * To change height of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableHeight', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableHeightCommand extends Command {
+	constructor( editor ) {
+		super( editor );
+
+		this.attributeName = 'height';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const editor = this.editor;
+		const selection = editor.model.document.selection;
+
+		const table = findAncestor( 'table', selection.getFirstPosition() );
+
+		this.isEnabled = !!table;
+		this.value = this._getValue( table );
+	}
+
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return table.getAttribute( this.attributeName );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.value] If set the command will set height. If height is not set the command will remove the attribute.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value } = options;
+
+		const tables = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
+
+		model.change( writer => {
+			if ( value ) {
+				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
+			} else {
+				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
+			}
+		} );
+	}
+}

+ 80 - 0
packages/ckeditor5-table/src/commands/tablewidthcommand.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/commands/tablewidthcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor } from './utils';
+
+/**
+ * The table width command.
+ *
+ * The command is registered by {@link module:table/tablepropertiesediting~TablePropertiesEditing} as
+ * `'tableWidth'` editor command.
+ *
+ * To change width of the selected table, execute the command:
+ *
+ *		editor.execute( 'tableWidth', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableWidthCommand extends Command {
+	constructor( editor ) {
+		super( editor );
+
+		this.attributeName = 'width';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const editor = this.editor;
+		const selection = editor.model.document.selection;
+
+		const table = findAncestor( 'table', selection.getFirstPosition() );
+
+		this.isEnabled = !!table;
+		this.value = this._getValue( table );
+	}
+
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return table.getAttribute( this.attributeName );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.value] If set the command will set width. If width is not set the command will remove the attribute.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value } = options;
+
+		const tables = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
+
+		model.change( writer => {
+			if ( value ) {
+				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
+			} else {
+				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
+			}
+		} );
+	}
+}

+ 6 - 0
packages/ckeditor5-table/src/tablepropertiesediting.js

@@ -17,6 +17,8 @@ import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand'
 import TableBorderColorCommand from './commands/tablebordercolorcommand';
 import TableBorderStyleCommand from './commands/tableborderstylecommand';
 import TableBorderWidthCommand from './commands/tableborderwidthcommand';
+import TableWidthCommand from './commands/tablewidthcommand';
+import TableHeightCommand from './commands/tableheightcommand';
 
 /**
  * The table properties editing feature.
@@ -56,8 +58,12 @@ export default class TablePropertiesEditing extends Plugin {
 		editor.commands.add( 'tableBorderWidth', new TableBorderWidthCommand( editor ) );
 
 		enableAlignmentProperty( schema, conversion );
+
 		enableProperty( schema, conversion, 'width', 'width' );
+		editor.commands.add( 'tableWidth', new TableWidthCommand( editor ) );
+
 		enableProperty( schema, conversion, 'height', 'height' );
+		editor.commands.add( 'tableHeight', new TableHeightCommand( editor ) );
 
 		enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
 		editor.commands.add( 'tableBackgroundColor', new TableBackgroundColorCommand( editor ) );