Shapes in ASP.NET MVC DOCX Editor

21 Oct 20262 minutes to read

Shapes are drawing objects that include text boxes, rectangles, lines, curves, circles, and so on. They can be preset or custom geometry. The DOCX Editor does not currently support inserting shapes. However, if the imported document contains a shape, the shape is preserved.

Supported shapes

The DOCX Editor has preservation support for lines, rectangles, basic shapes, block arrows, equation shapes, flowchart shapes, and stars and banners.

List of supported shapes in the DOCX Editor

When using the ASP.NET MVC service, the unsupported shapes are converted into images and preserved as images.

Text Box Shape

A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor displays, indicating that you can begin typing. It supports multiple lines of text with all text formatting.

Text box shape view in the DOCX Editor

Insert Text Box

The Text Box option is available in the Insert tab of the ribbon. It allows users to insert a text box into the document by configuring the required properties through a dedicated dialog.

Insert Text Box Using the UI

You can insert a text box from either the Ribbon or Toolbar:

  1. Click Text Box from the Insert tab in the Ribbon or from the Toolbar.
  2. The Insert Text Box dialog opens.
  3. Configure the required text box properties.
  4. Click Insert to add the text box to the document.

After insertion, the text box is added to the document with the configured settings.

Insert Text Box Dialog in DOCX Editor

Insert Text Box Using API

The DOCX Editor also provides an API to open the Insert Text Box dialog programmatically. This is useful when integrating custom toolbar items, buttons, or application workflows.

Use the following code snippet to open the Insert Text Box dialog:

container.documentEditor.showDialog('TextBox');

When invoked, the same Insert Text Box dialog available from the ribbon interface is displayed, allowing users to configure and insert a text box into the document.

Shape Resizer

The DOCX Editor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions.

Shape resizer view in the DOCX Editor

Text wrapping style

Text wrapping refers to how shapes fit with surrounding text in a document. Refer to this page for more information about text wrapping styles available in Word documents.

Positioning the shape

The DOCX Editor preserves the position properties of shapes and displays them based on those properties. It does not support modifying the position properties. However, a shape positioned relative to a line or paragraph moves automatically when the surrounding text is edited.

Online Demo

Explore how to preserve AutoShapes and grouped shapes in Word documents using the ASP.NET MVC DOCX Editor in this live demo here.