Make any webpage editable

Do you know you can make any web page editable? This editable page gives you the power to do many tasks quickly. For example, if you struggle to copy the text of a hyperlink while trying to make a selection of text with click and drag. You can quickly make any page editable and copy hyperlink text. You can quickly edit any part of the page and take a screenshot to send that to your colleague.

If you google “How to make any webpage editable” or “Edit any website” you may find this code like:

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

Which basically works based upon contentEditable property of HTML Element. See Making content Editable and HTMLElement.contentEditable on MDN.

You need to copy and paste in your browser’s address bar. But if you use chrome then chrome may strip the leading javascript: for the security purpose.

What if you can make a bookmarklet of this code which will toggle the page to be editable and non-editable. Here is the code of that bookmarklet.

function() {
  if (document.body.contentEditable === 'false' || document.body.contentEditable === 'inherit') {
    document.body.contentEditable = 'true'; document.designMode='on';
  } else {
    document.body.contentEditable = 'false'; document.designMode='off';
  }
}

Here is the bookmarklet because WordPress does not allow me to put bookmarklet here.