Swipe - Semantic WYSIWYG in-place editing


Swipe is part of Paggr CMS, a widget-based web publishing system. The richtext editor is very compact and enables highly context-specific functionality by following your cursor position.

Swipe's precise in-place editing capabilities simplify the creation of semantic annotations in HTML5.

Features 

  • Fully based on client-side JavaScript.
  • Tiny core code library. Everything (beyond undo/redo/save) is an extension.
  • Operates on the DOM instead of relying on hard-to-predict behaviour of execCommand.
  • AJAX library for client-server communication (e.g. for saving, or "linked-data-as-you-type")
  • Writing extensions with buttons, drop-downs, and attribute forms can be done in minutes.
  • Automatic clean-ups before saving to ensure well-formed and predictable markup.

This site is a sandbox for Swipe experiments and tests. The code is still rough right now, but it is evolving quickly based on customer projects and requirements. Just check back during the next weeks to follow the editor's progress.

Try Swipe on this page

Hold your left mouse button down on any of the three text widgets for 1.5 seconds to switch between view and edit mode.​

<esc> hides the editor temporarily
Saving is disabled (server-side).

To-Dos

  • Media integration
    • Images
    • HTML5 Video
    • Downloads
  • Improve
    • undo/redo
    • sub-lists
    • cursor position detection
    • word boundary detection
    • X-Browser compatibility (only tested with FF so far)
  • more keyboard shortcuts
    • [+] esc => hide editor
    • [+] ctrl+s => save
    • [+] ctrl+z => undo
    • [+] ctrl+shift+z => redo
  • More extensions ("code", "strike", etc.)