← All 93 demos

Contract Review

Review a sample contract with clause numbers, footnotes, comments, and tracked changes.

How it works

Legal clause numbering, footnotes, page view, tracked changes and anchored comments in one document. The interesting one is the cross-reference: insert a clause aheadof the referenced one and the reference renumbers itself. CKEditor lists auto-updating references as “planned”; TinyMCE documents none.

Example code

// Legal numbering is derived from structure by CSS counters, not typed in -
// which is what makes renumbering automatic.
editor.toggleLegalNumbering();

// A footnote on a defined term. Collapse the caret to the END of the clause
// first: insertFootnote() REPLACES the selection, so anchoring it to a selected
// clause deletes that clause's text.
editor.insertFootnote("Fees exclude VAT and any duties imposed after the Effective Date.");

// A cross-reference to a clause, by target id.
editor.insertCrossReference("cl-services", "number");

// An anchored comment. Pass a DOM Range as the anchor or the highlight is lost.
editor.comments.add({ text: "Should this be 'all reasonable skill and care'?", anchor: range });

editor.trackedChanges.enable();   // further edits are recorded as suggestions
editor.setPageView(true);         // live A4 page view with page numbers

Use this in your app

This demo runs the same editor you get for every framework. See how to add it to yours: