SpreadJS 14
Features / Shapes / Text on Shapes
In This Topic
    Text on Shapes
    In This Topic

    SpreadJS allows you to add and edit text in shapes by using one of the following ways:

    The text editor appears while adding or editing text in a shape and disappears when you click anywhere outside the shape.

    edit text in shapes

    When a shape is double clicked, the text formatting options appear along with the text editor. It includes all the simple text formatting features, alignment and options. However, rich text is not supported.

    text edit options in shapes

    Use Case Scenario

    This use case considers a scenario of a boardroom seating plan for a meeting. The meeting is to be attended by some important group of people and hence their seating arrangement is planned well in advance. The seats are represented by using auto shapes and the names of members are mentioned by using text on shapes. In case of any changes, these names can be added, edited or removed as well.

    shape text edit usage scenario

    Behavior of Shape Text

    The text editor and text follows the behavior of shape. For example, when the zoom action is performed on a sheet, the text editor and the text is resized and relocated as well.

    zoom action effect in shape text and editor

    With frozen rows or columns, the shape is folded over when scrolled. However, the text is not affected and remains in the same place.

    scroll effect on text in shapes

    Note: This behavior is different from Excel where the text and text editor both fold with the shape.

    The text editor and text are rotated when a shape is rotated.
    text editor rotate with shapes

    Behavior of Text Editor

    The text editor auto-breaks the lines and auto-lengthens the text area while submitting the input.

    shape editor area auto lengthen and auto break lines

    All the text present inside a shape is selected when a shape is selected and enter key is pressed. The 'Esc' key submits the shape text and finishes editing.

    enter escape key support in shape text edit

    IME input is also supported as shape text.

    IME support in shape text edit

    The shape text editor is enabled or disabled as explained below: