IInsertedFloatingImageOptions Interface

Declares settings of a floating image.

Declaration

export interface IInsertedFloatingImageOptions

Remarks

The inline image settings are used in the createFloating(position, options) method.

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
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 
});

Properties

actualSize Property

Specifies the actual size of a floating image in the document.

Declaration

actualSize: Size

Property Value

Type Description
Size

An object that contains an image size, in twips.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {url: imgUrl, actualSize: size});

base64 Property

Specifies the image content that is encoded with base64 digits.

Declaration

base64?: string

Property Value

Type Description
string

The image content.

callback Property

Specifies a function that is called after an image is loaded.

Declaration

callback?: (image: FloatingImage) => void

Property Value

Type Description
(image: FloatingImage) => void

The JavaScript function code. The image parameter returns the newly created image.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {
    url: imgUrl, description: 'A nice dog', actualSize: size,
    callback: (function(img){console.log('The following image has been added: '+ img.description)})});

description Property

Specifies an image description.

Declaration

description?: string

Property Value

Type Description
string

The description.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {
    url: imgUrl, description: 'A nice dog', actualSize: size,
});

distance Property

Specifies the distance between the image borders and the text that wraps around it.

Declaration

distance?: IFloatingObjectDistance

Property Value

Type Description
IFloatingObjectDistance

An object that implements the IFloatingObjectDistance interface.

horizontalPosition Property

Specifies an image's horizontal position settings.

Declaration

horizontalPosition?: IHorizontalAlignedPosition | IHorizontalAbsolutePosition | IHorizontalRelativePosition

Property Value

Type Description
IHorizontalAlignedPosition

An object that contains settings of the image's position that is aligned to an anchor element.

IHorizontalAbsolutePosition

An object that contains settings of the image's position that is specified in twips relative to an anchor element.

IHorizontalRelativePosition

An object that contains settings of the image's position that is specified as a percentage relative to an anchor element.

outlineColor Property

Specifies the image outline color.

Declaration

outlineColor?: string

Property Value

Type Description
string

The color value.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {url: imgUrl, actualSize: size,  
  outlineColor: 'green', outlineWidth: richEdit.unitConverter.pointsToTwips(3)});.

The following color formats are available:

  • 'Auto' and 'NoColor' values.
  • Hexadecimal notation (for example, '#31bb32').
  • RGB format (for example, 'rgb(51,187,51)').
  • Named colors (for example, 'darkturquoise').
Show allowed color names
Name HEX Name HEX Name HEX Name HEX
aliceblue #f0f8ff darkturquoise #00ced1 lightskyblue #87cefa peachpuff #ffdab9
antiquewhite #faebd7 darkviolet #9400d3 lightslateblue #8470ff peru #cd853f
aqua #00ffff deeppink #ff1493 lightslategray #778899 pink #ffc0cb
aquamarine #7fffd4 deepskyblue #00bfff lightsteelblue #b0c4de plum #dda0dd
azure #f0ffff dimgray #696969 lightyellow #ffffe0 powderblue #b0e0e6
beige #f5f5dc dodgerblue #1e90ff lime #00ff00 purple #800080
bisque #ffe4c4 feldspar #d19275 limegreen #32cd32 red #ff0000
black #000000 firebrick #b22222 linen #faf0e6 rosybrown #bc8f8f
blanchedalmond #ffebcd floralwhite #fffaf0 magenta #ff00ff royalblue #4169e1
blue #0000ff forestgreen #228b22 maroon #800000 saddlebrown #8b4513
blueviolet #8a2be2 fuchsia #ff00ff mediumaquamarine #66cdaa salmon #fa8072
brown #a52a2a gainsboro #dcdcdc mediumblue #0000cd sandybrown #f4a460
burlywood #deb887 ghostwhite #f8f8ff mediumorchid #ba55d3 seagreen #2e8b57
cadetblue #5f9ea0 gold #ffd700 mediumpurple #9370d8 seashell #fff5ee
chartreuse #7fff00 goldenrod #daa520 mediumseagreen #3cb371 sienna #a0522d
chocolate #d2691e gray #808080 mediumslateblue #7b68ee silver #c0c0c0
coral #ff7f50 green #00ff00 mediumspringgreen #00fa9a skyblue #87ceeb
cornflowerblue #6495ed honeydew #f0fff0 mediumturquoise #48d1cc slateblue #6a5acd
cornsilk #fff8dc hotpink #ff69b4 mediumvioletred #c71585 slategray #708090
crimson #dc143c indianred #cd5c5c midnightblue #191970 snow #fffafa
cyan #00ffff indigo #4b0082 mintcream #f5fffa springgreen #00ff7f
darkblue #00008b ivory #fffff0 mistyrose #ffe4e1 steelblue #4682b4
darkcyan #008b8b khaki #f0e68c moccasin #ffe4b5 tan #d2b48c
darkgoldenrod #b8860b lavender #e6e6fa navajowhite #ffdead teal #008080
darkgray #a9a9a9 lavenderblush #fff0f5 navy #000080 thistle #d8bfd8
darkgreen #006400 lawngreen #7cfc00 oldlace #fdf5e6 tomato #ff6347
darkkhaki #bdb76b lemonchiffon #fffacd olive #808000 turquoise #40e0d0
darkmagenta #8b008b lightblue #add8e6 olivedrab #6b8e23 violet #ee82ee
darkolivegreen #556b2f lightcoral #f08080 orange #ffa500 violetred #d02090
darkorange #ff8c00 lightcyan #e0ffff orangered #ff4500 wheat #f5deb3
darkorchid #9932cc lightgoldenrodyellow #fafad2 orchid #da70d6 white #ffffff
darkred #8b0000 lightgray #d3d3d3 palegoldenrod #eee8aa whitesmoke #f5f5f5
darksalmon #e9967a lightgreen #90ee90 palegreen #98fb98 yellow #ffff00
darkseagreen #8fbc8f lightpink #ffb6c1 paleturquoise #afeeee yellowgreen #9acd32
darkslateblue #483d8b lightsalmon #ffa07a palevioletred #d87093 windowtext #000000
darkslategray #2f4f4f lightseagreen #20b2aa papayawhip #ffefd5

outlineWidth Property

Specifies the image outline width.

Declaration

outlineWidth?: number

Property Value

Type Description
number

The width, in twips.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {url: imgUrl, actualSize: size,  
  outlineColor: 'green', outlineWidth: richEdit.unitConverter.pointsToTwips(3)});.

url Property

Specifies the image URL.

Declaration

url?: string

Property Value

Type Description
string

The image URL.

Remarks

var imgUrl = 'https://images.unsplash.com/photo-1561037404-61cd46aa615b';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {url: imgUrl, actualSize: size});

verticalPosition Property

Specifies an image's vertical position settings.

Declaration

verticalPosition?: IVerticalAlignedPosition | IVerticalAbsolutePosition | IVerticalRelativePosition

Property Value

Type Description
IVerticalAlignedPosition

An object that contains settings of the image's position that is aligned to an anchor element.

IVerticalAbsolutePosition

An object that contains settings of the image's position that is specified in twips relative to an anchor element.

IVerticalRelativePosition

An object that contains settings of the image's position that is specified as a percentage relative to an anchor element.

wrapSide Property

Specifies the side of the floating object the text wraps around.

Declaration

wrapSide?: WrapSide

Property Value

Type Description
WrapSide

The side where the text wraps around the object.

wrapType Property

Specifies the image's wrap type.

Declaration

wrapType?: WrapType

Property Value

Type Description
WrapType

A wrap type value.