aspnetcore-js-devexpress-dot-richedit-665166b6.md
Implements the base functionality of an image object.
export abstract class Image
Image FloatingImage
Specifies the actual image size.
get actualSize(): Size
set actualSize(value: Size)
| Type | Description |
|---|---|
| Size |
The image size.
|
The example below demonstrates how to maintain the aspect ratio when you resize an inserted image.
function resizeImage(img){
var newWidth = richEdit.unitConverter.centimetersToTwips(10);
var newHeight = newWidth / img.originalSize.width * img.originalSize.height;
img.actualSize = new DevExpress.RichEdit.Size(newWidth, newHeight);
};
richEdit.document.images.createInline(richEdit.selection.active, {
url: 'your-image-URL', callback: resizeImage});
Returns the image content that is encoded with base64 digits.
get base64(): string
| Type | Description |
|---|---|
| string |
The image content.
|
Specifies the image description.
get description(): string
set description(value: string)
| Type | Description |
|---|---|
| string |
The description.
|
Returns the image extension.
get extension(): string
| Type | Description |
|---|---|
| string |
The image extension, for instance '.jpeg'.
|
Returns the text buffer interval that contains the image.
get interval(): Interval
| Type | Description |
|---|---|
| Interval |
An object that contains the interval settings.
|
// remove all images from the second document section
var sectionInterval = richEdit.document.sections.getByIndex(1).interval;
var imgIterator = richEdit.document.images.getIterator(sectionInterval.start);
while(imgIterator.next() && (imgIterator.image.interval.end < sectionInterval.end))
imgIterator.image.delete();
Returns whether the image is loaded.
get isLoaded(): boolean
| Type | Description |
|---|---|
| boolean |
true if the image is loaded; otherwise, false.
|
Returns the original size of the image.
get originalSize(): Size
| Type | Description |
|---|---|
| Size |
The image size.
|
The example below demonstrates how to resize the inserted image keeping aspect ratio.
function resizeImage(img){
var newWidth = richEdit.unitConverter.centimetersToTwips(10);
var newHeight = newWidth/img.originalSize.width*img.originalSize.height;
img.actualSize = new DevExpress.RichEdit.Size(newWidth, newHeight);
};
richEdit.document.images.createInline(richEdit.selection.active, {
url: 'your-image-URL', callback: resizeImage});
Returns the image URL.
get url(): string | undefined
| Type | Description |
|---|---|
| string |
The image URL. undefined if the image has no URL.
|
Applies a wrap type to the image.
changeWrapType(
wrapType: WrapType
): InlineImage | FloatingImage
| Name | Type | Description |
|---|---|---|
| wrapType | WrapType |
The new wrap type.
|
| Type | Description |
|---|---|
| FloatingImage |
An object that contains settings of the current image (if the wrapType parameter value is not Inline).
| | InlineImage |
An object that contains settings of the current image (if the wrapType parameter value is Inline).
|
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);
Deletes the image from the document.
delete(): void
// remove all images from the second document section
var sectionInterval = richEdit.document.sections.getByIndex(1).interval;
var imgIterator = richEdit.document.images.getIterator(sectionInterval.start);
while(imgIterator.next() && (imgIterator.image.interval.end < sectionInterval.end))
imgIterator.image.delete();
Returns the image’s wrap type.
abstract getWrapType(): WrapType
| Type | Description |
|---|---|
| WrapType |
A wrap type value.
|
A function that is called after the image is loaded in the document.
onLoaded(
callback: (image: Image) => void
): void
| Name | Type | Description |
|---|---|---|
| callback | (image: Image) => void |
The function. The image parameter returns the processed image.
|
The onLoaded function allows you to perform actions after an image is loaded in the document. Use the image parameter to get information about the loaded image, for instance, original image size.
richEdit.events.contentInserted.addHandler(function(s, e){
var subDocument = s.document.subDocuments.getById(s.subDocumentId);
var images = richEdit.document.images.find(e.interval);
images.forEach(function(image) {
image.onLoaded(function(image){
console.log(image.isLoaded); // true
console.log(image.actualSize);
console.log(image.originalSize);
console.log(image.base64);
});
});
});
Reloads the image with new content.
reload(
base64: string,
size?: Size
): void
| Name | Type | Description |
|---|---|---|
| base64 | string |
The new image content in string representation that is encoded with base-64 digits.
| | size | Size |
Image size.
|
The reload method allows you to replace an image with new content specified by the base64 parameter. This API can be useful if a document contains an image in an unsupported format. In this case, you can convert the image on the server and reload it with new content (see the example below).
function getCurrentImage(s) {
const intervals = s.selection.intervals;
if (intervals.length == 1 && intervals[0].length == 1) {
const selectedImages = s.selection.activeSubDocument.images.find(intervals[0].start);
if (selectedImages.length == 1)
return selectedImages[0];
}
return null;
}
function onContextMenuShowing(s, e) {
var image = getCurrentImage(s);
if (image && !image.isLoaded) {
e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('ReloadImage', {text: 'Reload image'}), 1);
}
};
var requestId = 0;
var loadingLabel = " __loading__";
function onCustomCommandExecuted(s, e) {
switch (e.commandName) {
case 'ReloadImage':
var image = getCurrentImage(s);
if (!image.description || image.description.substring(0, loadingLabel.length) !== loadingLabel) {
var subDocument = s.selection.activeSubDocument;
var imageRequestId = String(requestId++);
image.description = loadingLabel + imageRequestId + loadingLabel + image.description;
var successHandler = function (serverResponce) {
var imgIterator = subDocument.images.getIterator();
const regexp = new RegExp(loadingLabel + "(\\d+)" + loadingLabel);
while (imgIterator.next()) {
var image = imgIterator.image;
if (image.description) {
var matchResult = image.description.match(regexp);
if (matchResult && matchResult[1] === imageRequestId) {
image.description = image.description.substring(matchResult[0].length);
if (serverResponce.success) {
image.reload(serverResponce.base64);
//image.reload(serverResponce.base64, { "width": serverResponce.width, "height": serverResponce.height });
}
break;
}
}
}
};
$.ajax({
url: "@(Url.Action("ReloadImage", "Home"))",
type: 'POST',
data: { base64: image.base64 },
dataType: 'json',
success: successHandler,
error: function (err) {
console.log(err);
}
});
}
break;
}
}
@(Html.DevExpress().RichEdit("rich")
.OnContextMenuShowing("onContextMenuShowing")
.OnCustomCommandExecuted("onCustomCommandExecuted")
)
[HttpPost]
public JsonResult ReloadImage(string base64) {
Image image = Image.FromStream(new MemoryStream(Convert.FromBase64String(base64)));
using (MemoryStream ms = new MemoryStream()) {
image.Save(ms, ImageFormat.Jpeg);
string resultBase64 = Convert.ToBase64String(ms.ToArray());
return Json(new Hashtable() { { "base64", resultBase64 }, { "width", 2000 }, { "height", 1500 }, { "success", true } });
}
}