Edit Document

This article describes how to open a previously loaded document for editing, which options should be applied, and how to send document content to a WYSIWYG HTML editor or any other editing application.

When a document is loaded into an instance of the Editor class, it is possible to open it for editing. In terms of GroupDocs.Editor, opening a document for editing involves creating an instance of the EditableDocument class by calling the Editor.edit() method. There are two overloads of the edit() method. The first one accepts a single parameter—an instance of the EditOptions class.

Each format family has its own implementation of the EditOptions class. They are listed in the table below.

Format FamilyExample FormatsEdit Options Class
WordProcessingDOC, DOCX, DOCM, DOT, ODTWordProcessingEditOptions
SpreadsheetXLS, XLSX, XLSM, XLSBSpreadsheetEditOptions
Delimiter-Separated Values (DSV)CSV, TSVDelimitedTextEditOptions
PresentationPPT, PPTX, PPS, POTPresentationEditOptions
Plain Text DocumentsTXTTextEditOptions
XMLAny XML-based format like CSPROJ, SVG, etc.XmlEditOptions
eBookMOBI, AZW3, EPUBEbookEditOptions
EmailEML, EMLX, TNEF, MSG, HTML, MHTML, ICS, VCF, PST, MBOX, OFTEmailEditOptions

The second overload is parameterless—it chooses the most appropriate default edit options based on the input document format.

The EditableDocument instance holds a version of the input document converted to an internal intermediate format according to the edit options. When it is ready, it can emit HTML, CSS, and other appropriate content that can be passed directly to the WYSIWYG editor. This is demonstrated below.

// Import the GroupDocs.Editor module
const groupdocsEditor = require('groupdocs-editor');

// Path to the input document
const inputFilePath = "C:\\input_path\\document.docx";

// Load the document into the Editor
const editor = new groupdocsEditor.Editor(inputFilePath, new groupdocsEditor.WordProcessingLoadOptions());

// Edit the document with default edit options
const openedDocument = editor.edit(); // With default edit options

// Create and adjust custom edit options
const editOptions = new groupdocsEditor.WordProcessingEditOptions();
editOptions.setEnableLanguageInformation(true);
editOptions.setEnablePagination(true);

// Edit the document with custom edit options
const anotherOpenedDocument = editor.edit(editOptions);

Multiple EditableDocument instances can be generated from a single Editor instance with different edit options. For example, for a WordProcessing document, you can call the edit() method first with pagination disabled, and then with pagination enabled. In other words, you can generate several different EditableDocument representations of the single original document. Another example is generating multiple EditableDocument instances for a single input Spreadsheet document, where each instance represents a different worksheet of the Spreadsheet document. This is shown below.

// Import the GroupDocs.Editor module
const groupdocsEditor = require('groupdocs-editor');

// Path to the input spreadsheet
const inputXlsxPath = "C://input/spreadsheet.xlsx";

// Load the spreadsheet into the Editor
const editor = new groupdocsEditor.Editor(inputXlsxPath, new groupdocsEditor.SpreadsheetLoadOptions());

// Create edit options for the first worksheet
const editOptions1 = new groupdocsEditor.SpreadsheetEditOptions();
editOptions1.setWorksheetIndex(0); // Index is 0-based, so this is the 1st worksheet
editOptions1.setExcludeHiddenWorksheets(true);

// Create edit options for the second worksheet
const editOptions2 = new groupdocsEditor.SpreadsheetEditOptions();
editOptions2.setWorksheetIndex(1); // Index is 0-based, so this is the 2nd worksheet
editOptions2.setExcludeHiddenWorksheets(false);

// Edit the first worksheet
const firstWorksheet = editor.edit(editOptions1);

// Edit the second worksheet
const secondWorksheet = editor.edit(editOptions2);

When the EditableDocument instance is ready, it can emit HTML markup, CSS markup, and other resources in different forms for passing them to the client-side WYSIWYG HTML editor or any other application that can edit HTML documents. This is briefly shown in the example below.

// Edit the document
const document = editor.edit();

// Get the body content of the HTML
const bodyContent = document.getBodyContent();

// Get only the images from the document resources
const onlyImages = document.getImages();

// Get all resources (images, stylesheets, fonts, etc.)
const allResourcesTogether = document.getAllResources();

For more information about obtaining HTML markup and resources from EditableDocument, please visit the following articles: