Skip to content

Latest commit

 

History

History
48 lines (24 loc) · 1.28 KB

README.md

File metadata and controls

48 lines (24 loc) · 1.28 KB

yoghurt.js

demo

​ 🎨 Tidy & lightweight HTML editor in place. Drag 'n 'drop to move elements around. No unnecessary changes to original document are made. Try demo here!

Quick hack

  1. Open Web page. Bring up the console (⌘ + ⌥ + C on Mac):

  2. Load Scripts

Object.assign(document.head.appendChild(document.createElement(`script`)), { type: `text/javascript`, src: `https://js.little-yoghurt.com/yoghurt.js` })
Object.assign(document.head.appendChild(document.createElement(`link`)), { rel: `stylesheet`, href: `https://js.little-yoghurt.com/yoghurt.css` })
  1. Take Control
yoghurt.enter() // pass the element as subtree root. default to `document.body`

How it works

  • yoghurt.enter:

    Append a div to every editable element and manage them (Listening to mouse/keyboard events, ect.)

  • yoghurt.leave:

    Remove each additional div in the subtree and hand over control

Functionality

  • Copy, paste and delete
  • Move and resize (With magnetic attaching and auxiliary lines)
  • Edit text content with double-click

Script and stylesheet are currently available at yoghurt.js and yoghurt.css