The most basic HTML WYSIWYG editor
Turning on the edit mode in Firefox or Chrome only requires a single JS statement in the console (open with F12):
document.designMode = "on"
You can put this into an 'edit' bookmark to toggle edit mode on and off. Fill the bookmark URL with:
javascript:void(document.designMode = document.designMode === 'on' ? 'off' : 'on');
Now you can edit. But how to save? "Save as" would save the original HTML. In order to save the modified HTML, you need to copy the Outer HTML from the Inspector into a text editor and save it. Not so elegant. But you can create a 'save'-bookmark for this. My solution will...
- use a "Save As" when editing a web page
- use the current path when editing locally as a file:///
- use a defined local path like 'C:/htdocs/' when detecting 'localhost'. Adjust it.
Copy this into the URL field of the bookmark:
javascript:(async function(){ const html = '\n' + document.documentElement.outerHTML; const path = location.pathname; const fileName = path.substring(path.lastIndexOf('/') + 1) || 'index.html'; if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') { try { const res = await fetch('http://localhost/save.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: path, html: html }) }); if (res.ok) alert('Saved silently to disk!'); else alert('Save failed. Check PHP logs.'); } catch (e) { alert('Could not reach save.php'); } } else { const b = new Blob([html], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = fileName; a.click(); } })();
The save.php looks like: