⌫ 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';
} 

This code is a bookmarklet that allows users to toggle a webpage into an editable mode, where you can directly modify the visible text and content on a webpage. It's a little tool for quickly experimenting with changes to website content without altering the actual source code.

How to use the bookmarklet

1. Create the bookmarklet:

• Copy the following code snippet:

  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)()

• Open your browser’s Bookmarks or Favorites menu.

• Create a new bookmark and paste the code snippet into the URL field. Name it something like Toggle Edit Mode.

2. Using the bookmarklet:

• Visit any webpage you want to edit.
• Click the Toggle Edit Mode bookmarklet.
• The webpage becomes editable, and a red bar appears at the top as a visual indicator.
• Modify text or other elements directly on the page as you like.
• To exit edit mode:
  • Click the bookmarklet again. The edits will disappear when the page is refreshed.

Summary of what the code does:

1. Disables Spellcheck: Turns off the browser's spellcheck to avoid distractions while editing.
2. Creates a Visual Indicator: Adds a red bar at the top of the page to show when "Edit Mode" is active.
3. Toggles Edit Mode: Switches the webpage between:
   • Editable: Enables in-place editing of text and content.
   • Non-Editable: Restores the page to its normal, uneditable state.
4. Visual Feedback: The red bar is visible in "Edit Mode" and hidden otherwise.