Make Content Editable Bookmarklet

_instructions.md

How to Install

1. Copy the contents of edit.js, below.
2. Visit this page.
3. Paste the contents of edit.js into the box labeled "Enter your javascript code here".
4. Click "Convert to Bookmarklet".
5. Drag the blue button that says "this link" to your bookmarks bar.

How to use

1. Visit any web page.
2. Click on the bookmarklet you created until a dialog appears saying "Content is now editable!"
3. Click on the page anywhere and use the cursor to edit the page. Links will be disabled so you can click on them.
4. Click on the bookmarklet to turn off editing and make links clickable again.

edit.js

(document.body.contentEditable="false"==document.body.contentEditable)&&alert("Content is now editable!");

On Chrome you need to click the bookmarklet twice to enabled the editing. I changed the code to:

document.body.contentEditable=(document.body.contentEditable !== 'true' ? 'true' : 'false')

Using alert() is not recommended usually.

@viliusle why is using alert() a mistake?

@ringmaster User alert() is strongly not recommended, because user is required to click on it. and it annoys users. Let users enjoy your extra functionality with minimal mouse click count. I recommend using toasts for big apps or avoid using alerts as much as possible or even use console.log().
p.s. its more like UX issue, then code mistake, sorry for too strong comment before. Also its nice to get feedback so fast.

@viliusle I appreciate your perspective. For a more complete product yours might be good advice. But frankly, for this four-year-old simple bookmarklet that is designed to toggle the enable content editing bit for a web page, the alert() seems like just the right amount of UI feedback for what it’s doing. Adding a “toast” would require embedding so much UI code in the bookmarklet as to make it needlessly complicated/bloated. That’s just my opinion, of course, and I’d love to see your alternative take on code that incorporates those UI elements in a bookmarklet efficiently. Obviously, if you’re doing this as part of a larger app and have control over the UI libraries so that it’s easy to add those elements, that would be a much better choice. But that’s not the case or intent here. Hopefully that makes sense to you!