Document and pages

The editor can edit a single document, and the document can have one or more pages. Each page is composed of multiple shapes.

Document

The document is correspond to the Doc class.

Access the document

const doc = editor.getDoc();

Create a document

Use editor.newDoc() instead of instantiating the Doc class directly.

const doc = editor.newDoc();

Save document to JSON

const json = editor.saveToJSON();

Load document from JSON

const json = ...
editor.loadFromJSON(json);

Page

A document must have at least one page, and the editor performs all tasks on a single current page. The page is correspond to the Page class.

Access to current page

const currentPage = editor.getCurrentPage();

Change the current page

const currentPage = ...
editor.setCurrentPage(currentPage);

Listen to the changes of current page

You can listen to the changes of current page through the both React component and editor object.

<DGMEditor
  onCurrentPageChange={(page) => {
    console.log('current page', page);
  }}/>

editor.onCurrentPageChange.addListener((page) => {
  console.log('current page', page);
});

Add a page

To add a page in the current document:

// add a page to the end
const page = editor.actions.addPage();

// add a page to the specific position (at the third position)
const position = 2;
const page = editor.actions.addPage(postion);

Remove a page

const page = ...
editor.actions.removePage(page);

Reorder a page

const page = ...
const newPostion = ...
editor.actions.reorderPage(page, newPosition);