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 = '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

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

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

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

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

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

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.