> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/docx-editor/format-text.md). # Format text with DOCX Editor Learn how to apply bold, italic, underline, font color, and highlighting to text in the WebViewer DOCX Editor, using the UI or programmatically. 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.

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: {% tabs %} {% tab title="JavaScript" %} {% code overflow="wrap" lineNumbers="true" %} ```javascript const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor(); ``` {% endcode %} {% endtab %} {% endtabs %} ### 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):
MethodApplies 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). {% tabs %} {% tab title="JavaScript (SDK v12.2+)" %} {% code lineNumbers="true" %} ```js 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' }); ``` {% endcode %} **Related links** * [OfficeEditor.updateSelectionStyle()](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#updateSelectionStyle) * [OfficeEditor.setMainCursorStyle()](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#setMainCursorStyle) * [OfficeEditor.Style](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.Style) * [OfficeEditor.Color](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.Color) {% endtab %} {% tab title="JavaScript (SDK v11.0+)" %} {% code lineNumbers="true" %} ```js 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 }, }); ``` {% endcode %} #### Related links * [OfficeEditor.updateSelectionStyle()](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#updateSelectionStyle) * [OfficeEditor.setMainCursorStyle()](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#setMainCursorStyle) * [OfficeEditor.Style](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.Style) * [OfficeEditor.Color](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.Color) {% endtab %} {% endtabs %} ### 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. {% tabs %} {% tab title="JavaScript (SDK v11.0+)" %} {% code lineNumbers="true" %} ```js 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); ``` {% endcode %} **Related links** * [OfficeEditor.toggleSelectedTextStyle()](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#toggleSelectedTextStyle) * [OfficeEditor.ToggleableStyles](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.ToggleableStyles) {% endtab %} {% endtabs %} ### 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. {% tabs %} {% tab title="JavaScript (SDK v12.2+)" %} {% code lineNumbers="true" %} ```js 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 }); ``` {% endcode %} **Related links** * [OfficeEditor.HighlightColors](https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#.HighlightColors) {% endtab %} {% endtabs %} 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](/web/get-started/faq/docx-editor-highlighting-and-shading-faq.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.apryse.com/web/docx-editor/format-text.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.