I’m using WebViewer with Office Editor enabled to edit DOCX files in an Angular application. I’m experiencing an issue where the font size automatically changes when typing in different parts of the document, particularly in tables.
Problem:
-
When I click in different cells of a table and start typing, the font size changes to whatever is defined in the document’s existing styles (e.g., 5pt, 7pt, 9pt)
-
I want to force ALL new text input to always use Arial 12pt, regardless of the cursor position or existing document styles
-
The document contains tables with embedded run-level font styles that override my cursor settings
What I’ve Tried:
- Using
setMainCursorStyleincursorsReadyevent:
typescript
doc.addEventListener('cursorsReady', () => {
const officeEditor = doc.getOfficeEditor();
officeEditor.setMainCursorStyle({
fontFace: 'Arial',
pointSize: 12,
});
});This only works for the initial cursor position but doesn't prevent font inheritance when clicking on existing text with different styles.Adding event listeners for cursor and selection changes:
typescriptdoc.addEventListener('cursorPropertiesUpdated', () => {
officeEditor.setMainCursorStyle({
fontFace: 'Arial',
pointSize: 12,
});
});
doc.addEventListener('selectionPropertiesUpdated', () => {
officeEditor.updateSelectionStyle({
'font-family': 'Arial',
'font-size': '12pt'
});
});
Still doesn't prevent the font from changing when typing in table cells with existing small font sizes.
Question:
What is the correct way to force Office Editor to always use a specific default font (Arial 12pt) for all new text input, regardless of the existing document styles or cursor position? Is there a way to override the document's embedded run-level styles or prevent font inheritance from existing text?
The desired behavior is that when a user types anywhere in the document (including in table cells with different font styles), the new text should always be Arial 12pt.
