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()