Image

• Sep 09, 2024

Iterate over an image collection and make every image inline

JS

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

Create an inline 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
});

Create a floating image

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

Download an image

JS

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