Format Painter

Anyone who has spent time in Microsoft Word knows the magic of the Format Painter: a feature that lets you copy formatting from one piece of text and apply it to another with a single click. Although Format Painter functionality exists in common web editors, developers creating custom document applications require more sophisticated formatting controls. The TX Text Control rich text editor enables developers to implement custom formatting programmatically. This article demonstrates how to build a Format Painter feature using the TX Text Control Document Editor, implementing format detection, copy and paste operations, and custom style handling through the JavaScript API.

Understanding Uniform Formatting Detection

Building a reliable Format Painter feature starts with solving one key challenge: how do you know if the selected text has consistent formatting? When users select text with mixed fonts, colors, or styles, copying that formatting creates inconsistent results. TX Text Control's &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; Selection Object &#9584; isCommonSelectionValueSelected Method Informs about whether an attribute from the Selection.Attribute enumeration has the same value for the complete selection. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>is Common Selection Value Selected Method solves this by checking if formatting is uniform across any selection. It returns true only when all selected text shares the same formatting attributes, preventing formatting errors before they happen.

Getting Started

Learn how to create the TX Text Control rich text editor with ASP.NET Core using this guide:

Getting Started: Document Editor with ASP.NET Core

The ASP.NET Core application with TX Text Control provides rich text editing with comprehensive functionality. The JavaScript API enables further customization and integration with specialized features, such as the Format Painter. For demonstration purposes, this implementation utilizes dedicated buttons to showcase the Format Painter functionality. The complete source code for this implementation is available on the TX Text Control GitHub repository. The project includes all the code examples, along with the complete ASP.NET Core setup and JavaScript integration.

Implementing Asynchronous Format Detection

Since TX Text Control uses callback-based APIs for asynchronous operations, the implementation converts these to Promise wrappers for cleaner async/await syntax. The isCommonValueSelectedAsync function specifically handles format validation using the &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; Selection Object &#9584; isCommonSelectionValueSelected Method Informs about whether an attribute from the Selection.Attribute enumeration has the same value for the complete selection. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>is Common Selection Value Selected Method. The implementation works as follows:

// Global variables let copiedFormat = null; let styleCounter = 1; let customStyles = {};

// Promise wrappers for TX Text Control API const get = (method) => new Promise((resolve, reject) => TXTextControl.selection[method](v => resolve(v), e => reject(e)) ); const set = (method, val) => new Promise((resolve, reject) => TXTextControl.selection[method](val, () => resolve(), e => reject(e)) ); const getLength = () => new Promise((resolve, reject) => TXTextControl.selection.getLength(v => resolve(v), e => reject(e)) ); const selectWord = () => new Promise((resolve, reject) => TXTextControl.selectWord(() => resolve(), e => reject(e)) );

// Utility function to check if selected text has uniform formatting

function isCommonValueSelectedAsync(selection, attr) {

return new Promise((resolve, reject) => {

selection.isCommonSelectionValueSelected(

attr,

(result) => {

resolve(result); // true/false

},

reject

);

});

} Copying Formatting From Text Selection

The event handler shown below validates the text selection and captures its formatting attributes only if the text selection has uniform formatting:

// Main event handler - runs when TX Text Control is fully loaded

TXTextControl.addEventListener("textControlLoaded", () => {

// Get references to all UI elements

const copyFormatButton = document.getElementById("copyFormatButton");

const pasteFormatButton = document.getElementById("pasteFormatButton");

const createStyleButton = document.getElementById("createStyleButton");

const customStylesDropdown = document.getElementById("customStylesDropdown");

const applyStyleButton = document.getElementById("applyStyleButton");

// Copy formatting from selected text

copyFormatButton.addEventListener("click", async () => {

// Validate that selection has uniform formatting

const isUniform = await isCommonValueSelectedAsync(

TXTextControl.selection,

TXTextControl.Selection.Attribute.All

);

if (isUniform) {

// Capture all formatting attributes from current selection

copiedFormat = {

baseline: await get("getBaseline"),

bold: await get("getBold"),

fontName: await get("getFontName"),

fontSize: await get("getFontSize"),

foreColor: await get("getForeColor"),

italic: await get("getItalic"),

strikeout: await get("getStrikeout"),

textBackColor: await get("getTextBackColor"),

underline: await get("getUnderline")

};

pasteFormatButton.disabled = false;

console.log("Format copied successfully.");

} else {

alert("Please select text with uniform formatting to copy the format.");

}

}); Applying Formatting to Text Selections

The paste handler applies the previously copied formatting to the target selection with all the captured attributes, as shown in this code:

// Apply previously copied formatting to current selection

pasteFormatButton.addEventListener("click", async () => {

if (!copiedFormat) {

pasteFormatButton.disabled = true;

return;

}

try {

// Apply all captured formatting attributes to current selection

await set("setBaseline", copiedFormat.baseline);

await set("setBold", copiedFormat.bold);

await set("setFontName", copiedFormat.fontName);

await set("setFontSize", copiedFormat.fontSize);

await set("setForeColor", copiedFormat.foreColor);

await set("setItalic", copiedFormat.italic);

await set("setStrikeout", copiedFormat.strikeout);

await set("setTextBackColor", copiedFormat.textBackColor);

await set("setUnderline", copiedFormat.underline);

console.log("Format pasted successfully.");

} catch (err) {

alert("Paste failed: " + err.message);

console.error(err);

}

});

Creating Custom Styles and Adding Them to TX Text Control's Style Collection

This section shows how to create reusable styles that become part of TX Text Control's style collection. Unlike the copy and paste formatting covered earlier, creating custom styles defines inline or paragraph formatting rules that can be reapplied across the document or in future editing sessions. The created custom styles are added to the Document Editor's "Styles" dropdown in the ribbon.

TX Text Control supports both &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; InlineStyleCollection Object Contains all formatting styles in a Text Control document or part of the document. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>inline and &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; ParagraphStyleCollection Object Contains all paragraph formatting styles in the current document. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>paragraph styles, which serve different formatting purposes:

Paragraph styles apply formatting to entire paragraphs. Inline styles apply character-level formatting to selected text portions within paragraphs.

This implementation uses inline styles because the format painter feature captures character-level formatting properties. Formatting is applied to selected text portions rather than entire paragraphs. The following code shows how to create styles and add them to TX Text Control's style collection:

// Create a reusable style from selected text formatting

createStyleButton.addEventListener("click", async () => {

try {

// Validate uniform formatting before creating style

const isUniform = await isCommonValueSelectedAsync(

TXTextControl.selection,

TXTextControl.Selection.Attribute.All

);

if (!isUniform) {

alert("Please select text with uniform formatting to create a style.");

return;

}

// Capture current selection's formatting

const currentFormat = {

baseline: await get("getBaseline"),

bold: await get("getBold"),

fontName: await get("getFontName"),

fontSize: await get("getFontSize"),

foreColor: await get("getForeColor"),

italic: await get("getItalic"),

strikeout: await get("getStrikeout"),

textBackColor: await get("getTextBackColor"),

underline: await get("getUnderline")

};

// Generate unique style name and create the style

const styleName = "CustomStyle" + styleCounter++;

// Add the created style in TX Text Control's inline styles collection

const addedStyle = await addStyle(styleName, currentFormat, "inline");

if (addedStyle) {

// Store for dropdown usage and add to UI

customStyles[styleName] = { ...currentFormat };

addStyleToDropdown(styleName);

}

alert(`Custom style '${styleName}' created successfully!`);

} catch (err) {

alert("Style creation failed: " + err.message);

console.error(err);

}

}); Note: TX Text Control's FormattingStyle.setFontSize Method requires font sizes in twips (1/20th of a point). The ptToTwips helper function converts point values to twips, ensuring programmatically created styles display at the correct font size.

// Convert font size from points to twips (required by TX Text Control)

function ptToTwips(pt) {

return pt * 20;

}

// Function to create a new inline style in TX Text Control's style collection

function addStyle(styleName, format) {

return new Promise((resolve, reject) => {

TXTextControl.inlineStyles.add(

styleName,

(style) => {

// Apply formatting values to the new style

style.setFontName(format.fontName);

style.setFontSize(ptToTwips(format.fontSize)); // Convert to twips

style.setForeColor(format.foreColor);

style.setBold(format.bold);

style.setItalic(format.italic);

style.setUnderline(format.underline);

style.setStrikeout(format.strikeout);

style.setBaseline(format.baseline);

style.setTextBackColor(format.textBackColor);

resolve(style);

},

(error) => reject(error)

);

});

}

Conclusion

This article demonstrates how to build a professional Format Painter feature for ASP.NET applications using TX Text Control's JavaScript API. The implementation uses the isCommonSelectionValueSelected Method to ensure uniform formatting detection. It also includes complete functionality for copying and pasting formats, creating custom styles, and adding them to the TX Text Control style collection using inline styles . This approach provides developers with a practical foundation for implementing sophisticated text formatting in web-based applications.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Format Painter

Post tagged with Format Painter in 2025

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Format Painter

Post tagged with Format Painter in 2025 ​

September 2025

Post tagged with Format Painter in 2025