DRAWING OBJECT EDIT

Commands for manipulating drawing objects — images, videos, shapes, and layers — via editor.execCommand.

Commands

command - changeDrawingObjectProperties
command - insertDrawingObject
command - insertDrawingObjectAlt
command - insertDrawingObjectByURL
command - insertDrawingObjectCaption
command - moveAbsolutePositionDrawingObject
command - moveDrawingObject
command - removeDrawingObject
command - resizeDrawingObject
command - rotateDrawingObjectLeft
command - rotateDrawingObjectRight
command - setDrawingObjectBackground
command - setDrawingObjectBorderColor
command - setDrawingObjectBorderStyle
command - setDrawingObjectBorderWidth
command - zoomDrawingObject

`command - changeDrawingObjectProperties`

Sets properties on the currently selected drawing object.

Name	Type	Description
`actionName`	string	Action name
`properties`	object	`{ style: object }`

// Border
editor.execCommand('changeDrawingObjectProperties', {
  style: { border: { style: 'solid', width: 3, color: { r: 255, g: 0, b: 0 } } }
});

// Float
editor.execCommand('changeDrawingObjectProperties', {
  style: { float: 'left' }    // 'none' | 'left' | 'right'
});

// Margin
editor.execCommand('changeDrawingObjectProperties', {
  style: { margin: { left: 10, right: 10, top: 10, bottom: 10 } }
});

// Vertical align
editor.execCommand('changeDrawingObjectProperties', {
  style: { verticalAlign: 'top' }   // 'top' | 'middle' | 'bottom' | 'baseline'
});

// Width / height
editor.execCommand('changeDrawingObjectProperties', {
  style: { width: { value: 100, unit: 'px' }, height: { value: 100, unit: 'px' } }
});

`command - insertDrawingObject`

Inserts an image or video at the caret position. If a selection exists, the selection is removed first. The inserted file is uploaded to the server.

See: Import & Upload API.

Name	Type	Description
`actionName`	string	Action name
`files`	`File[]`	Files to upload
`type`	string	`'Image'` or `'Video'`

editor.execCommand('insertDrawingObject', [file], 'Image');
editor.execCommand('insertDrawingObject', [file], 'Video');

`command - insertDrawingObjectAlt`

Sets the alt text on the selected image.

Name	Type	Description
`actionName`	string	Action name
`alt`	string	Alt text

editor.execCommand('insertDrawingObjectAlt', 'Alternative text for the image');

`command - insertDrawingObjectByURL`

Inserts an image or video from a URL at the caret position. If a selection exists, it is removed first.

Name	Type	Description
`actionName`	string	Action name
`url`	string	URL of the image/video to insert
`type`	string	`'Image'` or `'Video'`

editor.execCommand('insertDrawingObjectByURL', 'https://image.url/image', 'Image');

`command - insertDrawingObjectCaption`

Inserts a caption on the selected image.

Name	Type	Description
`actionName`	string	Action name
`caption`	string	Caption text

editor.execCommand('insertDrawingObjectCaption', 'Image caption');

`command - moveAbsolutePositionDrawingObject`

Moves the currently selected absolute-position image, video, layer, or shape.

Name	Type	Description
`actionName`	string	Action name
`movePosition`	object	`{ x: Number, y: Number }` — destination

editor.execCommand('moveAbsolutePositionDrawingObject', { x: 100, y: 100 });

`command - moveDrawingObject`

Moves the currently selected image, video, or table.

Name	Type	Description
`actionName`	string	Action name
`x`	number	Destination x
`y`	number	Destination y
`isFinish`	boolean	Whether the move is finished (recommended: `true`)

editor.execCommand('moveDrawingObject', 100, 100, true);

`command - removeDrawingObject`

Deletes the currently selected image or shape.

Name	Type	Description
`actionName`	string	Action name

editor.execCommand('removeDrawingObject');

`command - resizeDrawingObject`

Resizes the currently selected image, video, or shape.

Name	Type	Description
`actionName`	string	Action name
`[parentWidth]`	number	—
`[width]`	number	Target width (px)
`[height]`	number	Target height (px)
`[left]`	number	Left coordinate (for absolute-position objects)
`[top]`	number	Top coordinate (for absolute-position objects)

editor.execCommand('resizeDrawingObject', null, 200, 100, null, null);   // set width=200, height=100
editor.execCommand('resizeDrawingObject', null, null, null, 200, 100);   // set left=200, top=100

`command - rotateDrawingObjectLeft`

Rotates the currently selected image or shape 90° counter-clockwise.

Name	Type	Description
`actionName`	string	Action name

editor.execCommand('rotateDrawingObjectLeft');

`command - rotateDrawingObjectRight`

Rotates the currently selected image or shape 90° clockwise.

Name	Type	Description
`actionName`	string	Action name

editor.execCommand('rotateDrawingObjectRight');

`command - setDrawingObjectBackground`

Sets the background color of the selected layer.

Name	Type	Description
`actionName`	string	Action name
`colorCode`	string	Hex color (e.g. `'#ff0000'`)

editor.execCommand('setDrawingObjectBackground', '#ff0000');

`command - setDrawingObjectBorderColor`

Sets the border color of the selected image, video, or layer.

Name	Type	Description
`actionName`	string	Action name
`colorCode`	string	Hex color (e.g. `'#ff0000'`)

editor.execCommand('setDrawingObjectBorderColor', '#ff0000');

`command - setDrawingObjectBorderStyle`

Sets the border style of the selected image, video, or layer.

Name	Type	Description
`actionName`	string	Action name
`style`	string	`'none'`, `'solid'`, `'dashed'`, `'dotted'`, `'double'`

editor.execCommand('setDrawingObjectBorderStyle', 'none');
editor.execCommand('setDrawingObjectBorderStyle', 'solid');

`command - setDrawingObjectBorderWidth`

Sets the border width of the selected image, video, or layer.

Name	Type	Description
`actionName`	string	Action name
`width`	number	Border width in pixels

editor.execCommand('setDrawingObjectBorderWidth', 3);

`command - zoomDrawingObject`

Increases or decreases the width and/or height of the selected image or video.

Name	Type	Description
`actionName`	string	Action name
`isWidth`	boolean	Whether to change width
`isHeight`	boolean	Whether to change height
`zoom`	number	Delta in pixels (negative to shrink)

editor.execCommand('zoomDrawingObject', true,  false, 10);   // width +10px
editor.execCommand('zoomDrawingObject', false, true,  10);   // height +10px
editor.execCommand('zoomDrawingObject', true,  true,  -10);  // both -10px