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.

javascript

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

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

javascript

var imgUrl = 'your-image-URL';
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

javascript

var imgUrl = 'your-image-URL';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {
    url: imgUrl, description: 'An image', 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

javascript

var imgUrl = 'your-image-URL';
var size = new DevExpress.RichEdit.Size(richEdit.unitConverter.centimetersToTwips(12), 
    richEdit.unitConverter.centimetersToTwips(8));
richEdit.document.images.createFloating(richEdit.selection.active, {
    url: imgUrl, description: 'An image', 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

javascript

var imgUrl = 'your-image-URL';
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

javascript

var imgUrl = 'your-image-URL';
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

javascript

var imgUrl = 'your-image-URL';
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.