Format text with DOCX Editor

DOCX Editor supports applying formatting to text in the document, ranging from bolding to highlighting. You can apply formatting to the currently selected text or to the cursor so any new text gets the formatting.

Applying formatting to selected text in the DOCX Editor. The toolbar buttons update to show the formatting that's currently applied.

Format text in the UI

When editing a document in DOCX Editor, the text formatting buttons appear in the toolbar by default. Multiple text formatting options can be active at the same time.

Toolbar buttons reflect the current formatting of the selected text. For color-based properties such as font color and highlight color, the button updates to display the color applied to the selected text, or the current cursor position when no text is selected.

Format selected text

To format existing text:

1. Select the text to format.
2. Click the desired text formatting button.
3. The style is applied to the selection.

Format text as you type

To format text you want to insert by typing:

1. Place the cursor where you want to start typing.
2. Click the desired text formatting button.
3. Start typing and watch the new text use the selected style until you turn it off.

Format text via API

Use the OfficeEditor APIs to format text from your own code. You can set several formatting styles at once on the selected text or at the cursor, turn a single style on or off, and apply highlight colors (version 12.2.0+). All of these methods are on the OfficeEditor object, which you get from the current document:

JavaScript

const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();

Set formatting styles

To set a formatting style to a specific state, use one of the following APIs and pass in the desired state for the text formatting option(s):

Method	Applies to
Core.Document.OfficeEditor.updateSelectionStyle()	The currently selected text.
Core.Document.OfficeEditor.setMainCursorStyle()	The cursor and any text typed next.

You can update multiple properties at once. Color-related properties can be passed in as either RGB objects or hex strings. Colors will always have full opacity (or none for highlight color).

JavaScript (SDK v12.2+)

const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
// Make the selection bold, italic, highlighted yellow, and remove any underline.
await officeEditor.updateSelectionStyle({ 
  bold: true, 
  italic: true, 
  underline: false, 
  highlightColor: '#FFFF00' 
});
// Set the cursor so upcoming text is underlined and is highlighted red
await officeEditor.setMainCursorStyle({ 
  underline: true, 
  highlightColor: { r: 255, g: 0, b: 0 } 
});
// Remove the highlight from the current selection and make the font color blue.
await officeEditor.updateSelectionStyle({ 
  color: '#0000FF', 
  highlightColor: 'none' 
});

Related links

• OfficeEditor.updateSelectionStyle()
• OfficeEditor.setMainCursorStyle()
• OfficeEditor.Style
• OfficeEditor.Color

JavaScript (SDK v11.0+)

const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
// Make the selection bold, italic, and remove any underline.
await officeEditor.updateSelectionStyle({ 
  bold: true, 
  italic: true, 
  underline: false,
});
// Set the cursor so upcoming text is underlined
await officeEditor.setMainCursorStyle({ 
  underline: true
});
// Make the font color of the selected text blue.
await officeEditor.updateSelectionStyle({ 
  color: { r: 0, g: 0, b: 255 },
});

Related links

• OfficeEditor.updateSelectionStyle()
• OfficeEditor.setMainCursorStyle()
• OfficeEditor.Style
• OfficeEditor.Color

Toggle formatting styles

For supported text format options, such as bold and underline, OfficeEditor.toggleSelectedTextStyle() flips a single formatting style on the currently selected text, allowing for easy toggling. The OfficeEditor.ToggleableStyles enum provides all supported options.

JavaScript (SDK v11.0+)

const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
const { ToggleableStyles } = instance.Core.Document.OfficeEditor;

// Toggle bold on the current selection.
await officeEditor.toggleSelectedTextStyle(ToggleableStyles.BOLD);

// Toggle italic, underline, or strikeout the same way.
await officeEditor.toggleSelectedTextStyle(ToggleableStyles.ITALIC);
await officeEditor.toggleSelectedTextStyle(ToggleableStyles.UNDERLINE);
await officeEditor.toggleSelectedTextStyle(ToggleableStyles.STRIKEOUT);

Related links

• OfficeEditor.toggleSelectedTextStyle()
• OfficeEditor.ToggleableStyles

Apply highlight colors

Starting in version 12.2.0, you can apply highlight colors to text in DOCX Editor. To make sure highlights save as text highlights in Word, use a HighlightColors value.

JavaScript (SDK v12.2+)

const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
const { HighlightColors } = instance.Core.Document.OfficeEditor;

// Apply yellow highlight to the currently selected text
await officeEditor.updateSelectionStyle({ 
  highlightColor: HighlightColors.YELLOW
});

Related links

• OfficeEditor.HighlightColors

Highlight colors may be saved as either text highlights or character shading, depending on the color value, which may affect how other DOCX editors handle them. See the DOCX Editor highlighting and shading FAQ.