Word-Processor Tools

The drafting tools people reach for in Word, inside the editor: a watermark, margin line numbers, formatting marks, a permanent pen, inline code, layout tables and a gap cursor. All of them are visual aids or explicit markup, so the watermark, line numbers and marks never end up in the HTML you save.

Supply Agreement

This agreement is made between Northwind Ltd and Contoso GmbH. The non-breaking spaces in those names are invisible until you turn on formatting marks.

Select a word such as configureEditor and press Inline code to mark it as code.

1. Delivery schedule

Turn on line numbers and cite this paragraph by line, the way pleadings and contracts are reviewed.

Item	Quantity	Due
Steel brackets	1,200	1 October
Fasteners	8,000	15 October

Signed for Northwind	Signed for Contoso

Both parties agree to the schedule above.

Status

Loading the editor...

Visual lines: -
Unreachable positions: -
Layout tables: 0
Watermark text: DRAFT

Demo Code

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="div_editor1">...</div>

<script>
  var editor1 = new RichTextEditor("#div_editor1", { watermarkText: "DRAFT" });

  // --- watermark ------------------------------------------------------
  editor1.setWatermark(true);
  editor1.setWatermarkOptions({ text: "CONFIDENTIAL", opacity: 0.18, angle: -30 });

  // --- margin line numbers --------------------------------------------
  editor1.setLineNumbers(true);
  editor1.getLineCount();                 // number of visual lines

  // --- formatting marks, permanent pen, inline code --------------------
  editor1.setFormattingMarks(true);       // paragraph marks, nbsp, zero-width chars
  editor1.setPermanentPen(true);          // everything typed from now on is marked
  editor1.toggleInlineCode();             // <code> on the selection

  // --- layout tables ---------------------------------------------------
  editor1.insertLayoutTable(1, 2);        // a table used for geometry, not data
  editor1.listLayoutTables();             // -> [<table>, ...]

  // --- gap cursor ------------------------------------------------------
  // Block indices the caret cannot otherwise reach, e.g. between two adjacent tables.
  var gaps = editor1.getGapPositions();
  editor1.insertParagraphAt(gaps[gaps.length - 1]);
</script>