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:

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.

// 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.

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

End Text Editing and Save ​

docViewer.endPDFContentEditMode()