Edit Text and Image Properties

ComPDFKit supports to modify the properties of text and images.

Edit Text Properties

ComPDFKit supports modifying text properties, such as text font size, name, color, alignment, italic, bold, transparency, etc when you are in content editor mode. The following code shows you how to set text to 22px, black, bold, font Times-Roman, and opacity 60.

ComPDF for Web supports Helvetica, Courier, Times Roman, and DroidSansFallbackFull font family. DroidSansFallbackFull font is a font family that supports Chinese, Japanese, Korean, and other fonts.

Set Text Properties

Use docViewer.setContentEditorProperty to set properties for the selected text or the active text box.

docViewer.setContentEditorProperty(type, props);

Name	Required	Type	Options	Description
type	yes	string	text | image | common	The content-editor type. Use text to set text properties.
props	yes	object	N/A	The properties to set.
props.bold	no	boolean	true | false	Adds or removes bold without changing italic.
props.italic	no	boolean	true | false	Adds or removes italic without changing bold.
props.fontStyle	no	number | string	0 | 1 | 2 | 3 | regular | bold | italic | oblique | boldItalic | boldOblique	Replaces the complete bold and italic style. 0, 1, 2, and 3 represent regular, bold, italic, and bold italic, respectively.
props.underline	no	boolean	true | false	Adds or removes an underline.
props.strikeThrough	no	boolean	true | false	Adds or removes a strikethrough.
props.strikethrough	no	boolean	true | false	Deprecated alias for strikeThrough.
props.range	no	object	N/A	Sets the character range to update.

The following example sets the selected text to bold italic and adds an underline. If no characters are selected, the properties are applied to the entire active text box.

docViewer.setContentEditorProperty('text', {
  bold: true,
  italic: true,
  underline: true,
  strikeThrough: false
});

The bold, italic, underline, and strikeThrough properties are applied independently. If fontStyle is used with bold or italic, fontStyle is applied first, and then bold and italic override their corresponding styles. If both strikeThrough and the deprecated strikethrough are provided, strikeThrough takes precedence.

Without range, the properties apply to the currently selected characters. If there is no character selection, they apply to the whole active text box. To update an explicit range, pass the camelCase range returned by the contentSelected event. The event data contains:

Name	Type	Description
selectedText	string	The selected text.
pageNumber	number	The one-based page number containing the active text editor.
textRects	Array<{ left, top, right, bottom }>	The selected text rectangles.
range	CharacterRange	The selected character range in the public camelCase format.

docViewer.addEvent('contentSelected', ({
  selectedText,
  pageNumber,
  textRects,
  range
}) => {
  docViewer.setContentEditorProperty('text', {
    bold: true,
    underline: true,
    range
  });
});

A character range has the following format:

const range = {
  start: {
    sectionIndex: 0,
    lineIndex: 0,
    runIndex: 0,
    charIndex: -1
  },
  end: {
    sectionIndex: 0,
    lineIndex: 0,
    runIndex: 0,
    charIndex: 4
  }
};

Both start and end must contain all four integer fields. sectionIndex, lineIndex, and runIndex must be non-negative; charIndex can be -1 to represent the position before the first character. start must not be less than end. If the explicit range is invalid, the API returns false and does not change the text.

The legacy replacement form remains supported. For example, the following sets the complete bold/italic state to bold italic:

docViewer.setContentEditorProperty('text', {
  fontStyle: 3
});

const contentEditManager = docViewer.getContentEditManager();
const contentEditBoxes = contentEditManager.getContentBoxesList();
const contentEditBox = contentEditBoxes[0];
// Set text properties
contentEditBox.color = '#FF0000'
contentEditBox.opacity = 60;
contentEditBox.fontSize = 22;
contentEditBox.fontFamily = 'Times-Roman';
contentEditBox.fontStyle = 'bold';
contentEditBox.lineSpacing = 1.5;
contentEditBox.paragraphSpacing = 10;
contentEditBox.characterSpacing = 2;
contentEditBox.textAlign = 'center'; // left | right | center

// You can also set text style by using setTextStyles API
contentEditBox.setTextStyles && contentEditBox.setTextStyles({
  color: '#000000',
  opacity: 60,
  fontSize: 22,
  fontFamily: 'Times-Roman',
  fontStyle: 'bold',
  textAlign: 'center',
})

Edit Image Properties

ComPDFKit supports modifying image properties, such as rotating, cropping, mirroring, and setting transparency.

This example shows how to rotate an image and set it to semi-transparent:

const contentEditManager = docViewer.getContentEditManager();
const contentEditBoxes = contentEditManager.getContentBoxesList();
const contentEditBox = contentEditBoxes[0];

contentEditBox.opacity = 60;

// Rotate the image 90 degrees clockwise, -90 means rotate 90 degrees counterclockwise
contentEditBox.rotateImage(90);
// Flip the image horizontally or vertically
contentEditBox.flipImage('horizontal'); // horizontal | vertical
// Crop the image with the specified left, top, right, and bottom values
contentEditBox.cropImage({ left: 0, top: 0, right: 100, bottom: 100 });