Rich Blocks

Structured content inside ordinary documents: bookmark cards that turn a link into a title and summary, smart chips for people and dates, and table tools that sort by any column and number the rows.

Link previews and the people list come from small demo resolvers on this page. The editor itself never fetches a page or a directory - in your application, bookmarkResolver and chipResolver call your own server.

Project kickoff

Owner and date go here:

Inventory

Part	Stock	Supplier
Hinge	340	Contoso
Bracket	1200	Northwind
Anchor bolt	85	Fabrikam
Washer	9000	Contoso

Links worth reading:

Status

Loading the editor...

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", {
    // Bookmark cards: return { title, description, siteName, image } for a URL.
    // Call your own server - the editor never fetches third-party pages itself.
    bookmarkResolver: function (url) {
      return fetch("/api/link-preview?url=" + encodeURIComponent(url)).then(function (r) { return r.json(); });
    },
    // Smart chips: return [{ label, value }] matching what the user typed.
    chipResolver: function (query, type) {
      return fetch("/api/people?q=" + encodeURIComponent(query)).then(function (r) { return r.json(); });
    }
  });

  editor1.execCommand("insertbookmark");   // URL dialog -> bookmark card
  editor1.execCommand("insertchip");       // person chip picker
  editor1.execCommand("insertdatechip");   // date chip picker

  // Table tools act on the table that holds the caret.
  editor1.sortTableByColumn(1, "desc");    // -> { ok, sortedBy, direction, detectedType }
  editor1.addTableRowNumbers();            // adds a "#" column
  editor1.removeTableRowNumbers();
</script>