Back to Prosemirror

Index

pages/examples/index.html

latest1.6 KB
Original Source

>

Examples of what ProseMirror can do, and how to do it

  • [

Basics

Setting up a minimal rich text editor using the example configuration.

](basic/)

  • [

Dinos in the document

Defining a custom document node type and adding it to a schema.

](dino/)

  • [

Friendly Markdown

Allow users to switch between a Markdown and WYSIWYM editing interface.

](markdown/)

  • [

Tooltip

Using a plugin view to implement a dynamic tooltip that hovers over the editor selection.

](tooltip/)

  • [

Image upload

Handling asynchronous editing actions robustly by creating a placeholder during uploads.

](upload/)

  • [

Schema from scratch

Writing custom document schemas for a few different document styles, without using a base schema.

](schema/)

  • [

Writing your own menu

Building a custom editor menu bar.

](menu/)

  • [

Foldable nodes

Using node views and decorations to implement collapsible nodes.

](fold/)


More advanced examples

  • [

Embedded code editor

Representing code blocks using a code editor component inside a ProseMirror instance.

](codemirror/)

  • [

Linter

An editor that scans the document for common errors and assists the user in correcting them.

](lint/)

  • [

Editing footnotes

Implementing footnotes as inline nodes with content, and wiring up a separate editor for a sub-document.

](footnote/)

  • [

Track changes

Keeping a history of changes to the document, allowing the user to inspect and revert individual ones.

](track/)

  • [

Collaborative editing

A more or less solid collaborative editor, with support for shared annotations.

](collab/)

<>