⌫ Bookmarklet: Edit the web

makeContentEditable.js

/*
  Bookmarklet Ready Code:

  javascript:(function()%7Bdocument.body.spellcheck%3Dfalse%3Bif(!document.getElementById(%22__editing__%22))%7Bvar%20__editing__div%3Ddocument.createElement('div')%3B__editing__div.setAttribute('style'%2C%20'width%3A100%25%3B%20height%3A10px%3B%20background%3A%20red%3B%20position%3A%20fixed%3B%20top%3A%200px%3B%20left%3A%200px%3B%20z-index%3A%201000000%3B')%3B__editing__div.setAttribute('id'%2C%20'__editing__')%3Bvar%20__body%3D%20document.getElementsByTagName('body')%5B0%5D%3B__body.appendChild(__editing__div)%3B%7Dif(document.body.contentEditable!%3D'true')%7Bdocument.body.contentEditable%3D'true'%3Bdocument.designMode%3D'on'%3Bdocument.getElementById(%22__editing__%22).style.display%20%3D%20'block'%3B%7Delse%7Bdocument.body.contentEditable%3D'false'%3Bdocument.designMode%3D'off'%3Bdocument.getElementById(%22__editing__%22).style.display%20%3D%20'none'%3B%7D%7D)()
*/

document.body.spellcheck=false; 

if(!document.getElementById("__editing__"))
{
  var __editing__div=document.createElement('div');
    __editing__div.setAttribute('style', 'width:100%; height:10px; background: red; position: fixed; top: 0px; left: 0px; z-index: 1000000;');
    __editing__div.setAttribute('id', '__editing__');
  var __body= document.getElementsByTagName('body')[0];
    __body.appendChild(__editing__div); 
}

if(document.body.contentEditable!='true'){
  document.body.contentEditable='true'; 
  document.designMode='on';
  document.getElementById("__editing__").style.display = 'block';
  }
else{
  document.body.contentEditable='false'; 
  document.designMode='off';
  document.getElementById("__editing__").style.display = 'none';
} 

how do i use

Here is how to use this gist:

1. Create a new bookmark on your browser.
2. Give it any title you want (eg. edit page)
3. Replace the url with the text on line 4 from the gist above
4. Click the bookmarklet any time you want to edit content on the page (locally)