Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Images Class

Contains members that allow you to manage document images.

#Declaration

TypeScript
export class Images

#Methods

#createFloating(position, options) Method

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

#Declaration

TypeScript
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 = 'your-image-URL';
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

TypeScript
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 = 'your-image-URL';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
var imgDescription = 'An image';
// 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

TypeScript
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
FloatingImage | InlineImage[]

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

TypeScript
getAllImages(): (InlineImage | FloatingImage)[]

#Returns

Type Description
FloatingImage | InlineImage[]

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

TypeScript
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);