InlineImage Class
An inline image in a sub-document.
Namespace: DevExpress.Blazor.RichEdit
Assembly: DevExpress.Blazor.RichEdit.v23.2.dll
NuGet Package: DevExpress.Blazor.RichEdit
Declaration
public class InlineImage :
ImageBase<IInlineImageProcessor>,
IInlineImageProperties,
IImageBaseProperties,
InlineImageProperties,
ImageBasePropertiesRemarks
The Rich Text Editor allows you to insert pictures into a sub-document as inline or floating images.
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.
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 canceled. */
try {
documentAPI = richEdit.DocumentAPI;
DocumentImageSource imageSource = DocumentImageSource.LoadFromUrl("your-image-url", 1000, 1000);
InlineImage inlineImage = await documentAPI.InlineImages.CreateAsync(imageSource);
}
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 canceled. */
try {
documentAPI = richEdit.DocumentAPI;
FileStream sourceStream = File.Open("file-path-to-your-image", FileMode.Open);
DocumentImageSource imgSource = DocumentImageSource.LoadFromStream(sourceStream, 1000, 1000);
InlineImage newInlineImage = 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, CancellationToken) 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(CancellationToken) 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 canceled. */
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 canceled. */
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 canceled. */
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, CancellationToken) 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 canceled. */
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}");
}
}