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

JS

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

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.

JS

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

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

JS

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

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.

JS

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.

JS

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