Skip to content

Content Editor

ComPDFKit's Content Editor provides the ability to change content so that its data can be improved or re-purposed.

  • Create, move, or delete text.
  • Edit text properties.

When editing content, other operations are not supported like adding or deleting annotations, modifying form properties, etc.

The content editor supports the following editing modes:

  • Text Mode. In text mode, the text blocks surrounded by dotted lines will be displayed in the PDF document, then you can add, or delete text.

Initialize the Editing Mode

Before editing, you should initialize editing mode. ComPDFKit provides methods to initialize editing mode. The following code shows you how to initialize the editing mode:

javascript
docViewer.startPDFContentEditMode()

Add, Move, or Delete Text

ComPDFKit provides methods to do various operations like creating text.

You can use the mouse and keyboard to manipulate text areas on WebViewer as in Microsoft Word, you can add, copy, paste, cut, or delete text by keyboard.

javascript
// Insert Text.
docViewer.contentEditAnnotationsManager.addTextEditor({
  rect,
  fontData: {
    fontName: 'Helvetica',
    fontSize: 14,
    r: 0,
    g: 0,
    b: 0,
    opacity: 1,
    isBold: 0,
    italic: 0,
  },
  alignType: 2
})

Edit Text Properties

ComPDFKit provides multiple methods to modify text properties. You can modify text font size, name, color, alignment, italic, bold, transparency, etc. The following code shows you how to set text to 22px, black, bold, font Times-Roman, and opacity 60.

javascript
const editAnnotation = docViewer.contentEditAnnotationsManager.getAnnotations(0)[0]
editAnnotation.setTextStyle({
  color: '#000000',
  opacity: 60,
  fontSize: 22,
  fontFamily: 'Times',
  fontStyle: 'bold'
})

End Text Editing and Save

javascript
docViewer.endPDFContentEditMode()