InlineImage Class

An inline image in a sub-document.

Namespace: DevExpress.Blazor.RichEdit

Assembly: DevExpress.Blazor.RichEdit.v21.2.dll

Declaration

public class InlineImage :
    ImageBase<IInlineImageProcessor>,
    IInlineImageProperties,
    IImageBaseProperties,
    InlineImageProperties,
    ImageBaseProperties

Remarks

The Rich Text Editor allows you to insert pictures into a sub-document as inline or floating images.

Run Demo: Rich Text Editor — Document API

An inline image is embedded in a paragraph‘s text. The position of an inline image depends on the position and layout properties of the paragraph.

Rich Edit - Inline Image

Use a sub-document’s InlineImages property to access methods that allow you to insert and find inline images.

Insert Inline Images

Call any method of the DocumentImageSource class to specify an image source. Pass an image source to an InlineImages.CreateAsync method overload to insert the inline image into a sub-document.

The example below shows how to load a 1000 by 1000 twips image from a URL and insert it as inline image at the end of the main sub-document:

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            DocumentImageSource imgSource = DocumentImageSource.LoadFromUrl("your-image-url", 1000, 1000);
            InlineImage inlineImage = await documentAPI.InlineImages.CreateAsync(imgSource);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

The code sample below shows how to load a 1000 by 1000 twips image from a stream and insert it as inline image at the beginning of the main sub-document:

@using System.IO
@* ... *@
<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            FileStream sourceStream = File.Open("file-path-to-your-image", FileMode.Open);
            DocumentImageSource imgSource = DocumentImageSource.LoadFromStream(sourceStream, 1000, 1000);
            InlineImage inlineImage = await documentAPI.InlineImages.CreateAsync(0, imgSource);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Access Inline Images

Call the GetAsync(Int32) method to access an inline image by its index in a sub-document. To get all inline images a sub-document contains, call the GetAllAsync() method.

The following example shows how to access the first inline image and all inline images in the main sub-document:

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            InlineImage firstInlineImage = await documentAPI.InlineImages.GetAsync(0);
            IReadOnlyList<InlineImage> inlineImages = await documentAPI.InlineImages.GetAllAsync();
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Change Inline Image Properties

Pass image properties to the ChangePropertiesAsync method to apply them to the image. You can specify the image properties or use the CopyFrom(InlineImage) method to copy properties from another image.

The example below shows how to apply settings of the first inline image to all inline images in the main sub-document.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            InlineImage firstInlineImage = await documentAPI.InlineImages.GetAsync(0);
            IReadOnlyList<InlineImage> inlineImages = await documentAPI.InlineImages.GetAllAsync();
            for (int i = 1; i < inlineImages.Count; i++)
                await inlineImages[i].ChangePropertiesAsync(properties => {
                    properties.CopyFrom(firstInlineImage);
                });
                @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

An image’s height and width are measured in twips. Use methods of the UnitConverter class to convert centimeters, inches, pixels, or points to twips.

The example below shows how to change an inline image’s actual size.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            InlineImage firstInlineImage = await documentAPI.InlineImages.GetAsync(0);
            await firstInlineImage.ChangePropertiesAsync(properties => {
                if (firstInlineImage.ActualSize.Height != UnitConverter.CentimetersToTwips(5)) {
                    properties.ActualSize.Height = UnitConverter.CentimetersToTwips(5);
                    properties.ActualSize.Width = UnitConverter.CentimetersToTwips(5);
                }
            });
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Delete Inline Image

An inline image’s Interval property allows you to get the interval that contains the image. Pass the interval to the sub-document’s RemoveAsync(Interval) method to delete the image.

The following example deletes the first inline image of the main sub-document:

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            InlineImage firstInlineImage = await documentAPI.InlineImages.GetAsync(0);
            await documentAPI.RemoveAsync(firstInlineImage.Interval);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Inheritance

Object
DocumentElementBase
ImageBase<DevExpress.Blazor.RichEdit.Internal.IInlineImageProcessor>
InlineImage
See Also