Floating Objects

• Nov 16, 2021
• 4 minutes to read

Overview

The RichEdit allows the floating objects - pictures and text boxes - to be inserted into a document by end-users (via specific UI) or programmatically. Floating means that the object is strictly positioned, absolutely or relatively within the document, regardless of the document text flow. A floating object’s anchor (seen in the picture below) specifies the paragraph with which the object is associated and indicates where the floating object is located in relation to the text.

See Online Demo: Floating Objects

Note

The HTML format does not support text wrapping settings. Thus, if an end-user saves a document containing floating objects (images and text boxes) to an HTML file, they are saved as inline images and plain text correspondingly. See the following topic to learn more: HTML Support in Rich Text Editor.

Manage Floating Objects in Code

Insert a Floating Object

• Insert a Floating Text Box

  To create a text box anchored to the given document position, use the RichEditCommands.insertFloatingTextBox client command as the following code snippet demonstrates:

  JS

  myRichEdit.commands.insertFloatingTextBox.execute();
  

  The inserted text box is at the beginning of the first paragraph on the page that contains a floating object’s anchor by default.

• Insert a Floating Picture

  There is no an individual dedicated client command to create floating pictures. To insert a floating picture, do the following:

  1. Insert an in-line picture using the RichEditCommands.insertPicture client command;
  2. Switch the inserted picture’s text wrapping (from the default None to any other value) by calling the RichEditCommands.changeFloatingObjectTextWrapping client command.

  Example:

  JS

  var settings = {
      floatingObjectTextWrapType: ASPx.FloatingObjectTextWrapSide.Both,
      floatingObjectTextWrapSide: ASPx.FloatingObjectTextWrapType.Square
  };
  var imageUrl = "https://demos.devexpress.com/ASPxImageAndDataNavigationDemos/Content/Images/landscapes/07.jpg";
  myRichEdit.commands.insertPicture.execute(imageUrl);
  myRichEdit.commands.changeFloatingObjectTextWrapping.execute(settings);
  

Receive a Floating Object’s information

You can access floating objects stored in the active sub-document and their information using the SubDocument class’s API in the following notation:

clientRichEdit.document.activeSubDocument.member_name

• Floating Text Boxes

  Member	Link	Description
  floatingTextBoxesInfo	SubDocument.floatingTextBoxesInfo	Returns information about floating text boxes in the sub-document.
  getFloatingTextBoxInfo()	SubDocument.getFloatingTextBoxInfo	Returns information specific for floating text boxes about the sub-document.

• Floating Pictures

  Member	Link	Description
  floatingPicturesInfo	SubDocument.floatingPicturesInfo	Returns information about floating pictures in the sub-document.

Modify the Selected Floating Object

The following client commands are available for manipulating floating objects programmatically. Call the commands in the notation given below:

clientRichEditName.commands.commandName.execute(parameter_if_any)

• Text Wrapping

  Command Name	Link	Description
  changeFloatingObjectTextWrapping	RichEditCommands.changeFloatingObjectTextWrapping	Gets a command to modify a floating object’s text wrapping settings.

• Position

  Command Name	Link	Description
  changeFloatingObjectAbsolutePosition	RichEditCommands.changeFloatingObjectAbsolutePosition	Gets a command to change a floating object’s absolute position.
  changeFloatingObjectAlignmentPosition	RichEditCommands.changeFloatingObjectAlignmentPosition	Gets a command to modify a floating object’s alignment position.
  changeFloatingObjectRelativePosition	RichEditCommands.changeFloatingObjectRelativePosition	Gets a command to modify a floating object’s relative position.

• Rotate and Resize

  Command Name	Link	Description
  changeFloatingObjectAbsoluteSize	RichEditCommands.changeFloatingObjectAbsoluteSize	Gets a command to change a floating object’s absolute size.
  changeFloatingObjectRotation	RichEditCommands.changeFloatingObjectRotation	Gets a command to rotate a floating object.
  changeFloatingObjectLockAnchor	RichEditCommands.changeFloatingObjectLockAnchor	Gets a command to lock a floating object’s anchor.
  changeFloatingObjectLockAspectRatio	RichEditCommands.changeFloatingObjectLockAspectRatio	Gets a command to lock a floating object’s aspect ratio.

• Change the Outline

  Command Name	Link	Description
  changeFloatingObjectOutlineColor	RichEditCommands.changeFloatingObjectOutlineColor	Gets a command to modify a floating object’s outline color.
  changeFloatingObjectOutlineWidth	RichEditCommands.changeFloatingObjectOutlineWidth	Gets a command to modify a floating object’s outline width.
  changeFloatingObjectFillColor	RichEditCommands.changeFloatingObjectFillColor	Gets a command to modify a floating object’s background fill color.

• Text Box Settings

  Command Name	Link	Description
  changeTextBoxContentMargins	RichEditCommands.changeTextBoxContentMargins	Gets a command to modify a text box’s content margins.
  changeTextBoxRelativeSize	RichEditCommands.changeTextBoxRelativeSize	Gets a command to modify a text box’s relative size settings.
  changeTextBoxResizeShapeToFitText	RichEditCommands.changeTextBoxResizeShapeToFitText	Gets a command to resize the shape to fit the text in the text box.

• Invoke the Layout Dialog

  Command Name	Link	Description
  openLayoutOptionsDialog	RichEditCommands.openLayoutOptionsDialog	Gets a command to invoke the Layout dialog window to customize the settings of a floating object.

Manipulations Trough UI

End-users are allowed to freely position, scale and rotate all floating objects when inserting pictures or text boxes into a document. They can also modify object characteristics using context menu items, a specific ribbon context tab, or activate the built-in Layout dialog through the context menu.

• Insert a Text Box

  An end-user can insert a text box object using the Text Box ribbon button located in the ribbon’s Insert tab, in the Text group. A selected floating text box’s contents can be formatted using the Home ribbon tab.

  

• Ribbon Context Tab

  When a floating object is selected, the Format context tab is available in the ribbon. This tab allows end-users to position the floating object within the document and set the shape’s fill or border color.

  

• Handles to Rotate and Resize

  End-users can rotate and resize a floating object using specially designed handles as shown in the following image. When a floating object rotates, its content is also rotated.

  

• Context Menu and the Layout Dialog

  End-users can also modify object characteristics using context menu items, or use the built-in Layout dialog invoked through the context menu to set more advanced options.