Images Class

Contains members that allow you to manage document images.

Declaration

export class Images

Methods

createFloating(position, options) Method

Creates a floating image at the specified position in the document.

Declaration

createFloating(
    position: number,
    options: IInsertedFloatingImageOptions
): FloatingImage

Parameters

Name Type Description
position number

The document position in which to create the image.

options IInsertedFloatingImageOptions

The image options.

Returns

Type Description
FloatingImage

The newly created image.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(
  richEdit.unitConverter.centimetersToTwips(5), richEdit.unitConverter.centimetersToTwips(5)
);
var position = new DevExpress.RichEdit.HorizontalAlignedPosition(
  DevExpress.RichEdit.FloatingObjectHorizontalAlignment.Left, 
  DevExpress.RichEdit.FloatingObjectHorizontalAnchorElement.LeftMargin
);

richEdit.document.images.createFloating(richEdit.selection.active, {
  url: imgUrl, 
  actualSize: size, 
  wrapType: DevExpress.RichEdit.WrapType.BehindText, 
  horizontalPosition: position 
});

createInline(position, options) Method

Creates an inline image at the specified position in the document.

Declaration

createInline(
    position: number,
    options: IInsertedInlineImageOptions
): InlineImage

Parameters

Name Type Description
position number

The document position in which to create the image.

options IInsertedInlineImageOptions

The image options.

Returns

Type Description
InlineImage

The newly created image.

Remarks

The example below demonstrates how to create an inline image with the specified settings in the document, and add a figure caption field and image description below the image.

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
var imgDescription = 'A nice dog';
// adds a figure caption and image description below the image
function insertImageDescription(img){
    richEdit.document.insertParagraph(img.interval.start);
    var positionAfterImg = img.interval.start + 2;
    richEdit.document.insertParagraph(positionAfterImg);
    richEdit.document.insertText(positionAfterImg, ' ' + img.description);
    richEdit.selection.setSelection(positionAfterImg);
    richEdit.executeCommand(DevExpress.RichEdit.ReferencesTabCommandId.CreateFigureCaptionField);
    richEdit.document.insertParagraph(positionAfterImg);
};
richEdit.document.images.createInline(richEdit.selection.active, {
    url: imgUrl, 
    actualSize: size, 
    description: imgDescription, 
    callback: insertImageDescription
});

find(position) Method

Returns a list of images that are placed at the specified position, interval, or an array of intervals.

Declaration

find(
    position: number | Interval | Interval[]): (InlineImage | FloatingImage
)[]

Parameters

Name Type Description
position number | Interval | Interval[]

A document position, an interval, or an array of intervals.

Returns

Type Description
InlineImage | FloatingImage[]

A list of images.

Remarks

// find all images in the second section
var images = richEdit.document.images.find(richEdit.document.sections.getByIndex(1).interval);
See Also

getAllImages Method

Returns a list of all images in the document.

Declaration

getAllImages(): (InlineImage | FloatingImage)[]

Returns

Type Description
InlineImage | FloatingImage[]

An array of document images.

Remarks

The code sample below demonstrates how to download the first image in the Rich Text Editor.

var img = richEdit.document.images.getAllImages()[0];
DevExpress.RichEdit.Utils.download(img.base64, 'imageName' + img.extension);

getIterator Method

Returns an object that allows you to iterate over an image collection.

Declaration

getIterator(
    startPosition?: number
): ImageIterator

Parameters

Name Type Description
startPosition number

The document position to start traversing through the images.

Returns

Type Description
ImageIterator

An object that allows you to iterate over an image collection.

Remarks

The example below demonstrates how to change the wrapping type of every document image to Inline.

var imgIterator = richEdit.document.images.getIterator();
while(imgIterator.next())
  imgIterator.image.changeWrapType(DevExpress.RichEdit.WrapType.Inline);