Demos
Browse all demos

Distraction-free Writing

Hide the toolbar, dim everything but the current paragraph, keep the caret steady, or go full screen.

  • Reading mode (editor.toggleReadingMode(), Ctrl+Shift+M) removes the toolbar and status bar; a button in the corner brings them back. Set config.readingModePersistenceKey to remember it across reloads.
  • Focus mode and typewriter scrolling come from the typewriter plugin in all_plugins.js. Neither changes the document: there is nothing to save or strip.
  • Full screen is the fullscreen toolbar command; the same button (top right of the toolbar) brings the page back.
<div id="div_editor1"></div>
<script>
    var config = {};
    config.toolbar = "writer";
    config.toolbar_writer = "{bold,italic}|{paragraphs}|{readingmode,fullscreen}";
    config.readingModePersistenceKey = "my-doc"; // remember reading mode across reloads (optional)

    var editor1 = new RichTextEditor("#div_editor1", config);

    // Reading mode hides the toolbar and status bar (Ctrl+Shift+M, or the button).
    editor1.toggleReadingMode();

    // From the typewriter plugin (in all_plugins.js):
    editor1.setFocusMode(true);      // dim every block except the one being written
    editor1.setTypewriterMode(true); // keep the caret line at a steady height
</script>