Jun

Transformă Chrome într-un editor de text complet – trucul pe care nimeni nu ți-l arată

06/08/2026 12:00 AM de Admin în Dezvoltare web, trucuri, html, javascript

Transformă Chrome într-un editor de text complet – trucul pe care nimeni nu ți-l arată

Știai că poți transforma Google Chrome într-un editor de text funcțional, cu unelte de formatare și posibilitate de salvare, fără să instalezi nimic și fără să deschizi vreun site? Totul pornește de la un singur rând de cod pe care îl lipești direct în bara de adrese. Nu ai nevoie de extensii, nu ai nevoie de cont, nu ai nevoie de internet. Funcționează identic pe Windows, Mac și Linux, iar în 2026 rămâne unul dintre cele mai subestimate trucuri din Chrome.

În acest articol îți arăt cum funcționează trucul de bază, cum îl transformi într-un editor adevărat cu toolbar, cum adaugi export în TXT, HTML și DOC care păstrează toată formatarea, și de ce acest truc merită un loc permanent în bookmarks. Dacă ești developer, copywriter sau pur și simplu cineva care are nevoie de un notepad rapid, citește până la final.

Ce este trucul data:text/html și cum funcționează

Chrome (și alte browsere bazate pe Chromium) acceptă un protocol special numit data URI. În loc să navighezi către un server, poți să-i spui browserului să afișeze direct conținut HTML scris chiar în bara de adrese. Formatul arată așa:

data:text/html,<html contenteditable><style>body{font-size:24px;font-family:sans-serif;padding:40px}</style>

Copiezi acest rând, îl lipești în bara de adrese a Chrome, apeși Enter, și ai un notepad gol direct în browser. Atributul contenteditable face ca întreaga pagină HTML să devină editabilă — poți scrie, selecta, copia text exact ca într-un editor de documente. Stilul adăugat prin tagul style setează fontul, dimensiunea și padding-ul pentru o experiență vizuală confortabilă.

Acest truc este util atunci când ai nevoie de un spațiu de scriere rapid, fără distrageri. Nu se încarcă niciun site, nu apare nicio reclamă, nu consumă resurse — este practic cea mai rapidă cale de la „am nevoie să notez ceva" la „scriu". Dacă vrei să verifici câte cuvinte ai scris, poți folosi oricând Word Counter sau varianta avansată Word Counter PRO de pe seotoolpro.ro.

Cum adaugi un toolbar cu unelte de formatare

Varianta de bază este utilă, dar limitată — nu ai bold, italic, liste sau headings. Vestea bună este că tot prin data URI poți construi un editor complet, cu un toolbar funcțional care folosește comanda nativă JavaScript document.execCommand(). Această funcție permite aplicarea de formatări asupra textului selectat fără nicio librărie externă.

Ideea este simplă: creezi un div cu atributul contenteditable pentru zona de editare și un alt div deasupra cu butoane care apelează execCommand cu parametri diferiți. Iată structura de bază a toolbar-ului:

<div id="t">
  <button onclick="c('bold')"><b>B</b></button>
  <button onclick="c('italic')"><i>I</i></button>
  <button onclick="c('underline')"><u>U</u></button>
  <button onclick="c('strikethrough')"><s>S</s></button>
  <button onclick="c('formatBlock','<h1>')">H1</button>
  <button onclick="c('formatBlock','<h2>')">H2</button>
  <button onclick="c('insertUnorderedList')">UL</button>
  <button onclick="c('insertOrderedList')">OL</button>
</div>

<div id="e" contenteditable spellcheck="true"></div>

<script>
function c(a, b) {
  document.execCommand(a, false, b);
  document.getElementById('e').focus();
}
</script>

Funcția c() este un wrapper simplu care primește comanda (bold, italic, formatBlock etc.) și o aplică pe selecția curentă. După execuție, focusul revine automat pe zona de editare. Poți adăuga câte butoane vrei — fiecare apelează o comandă execCommand diferită. Printre cele mai utile: justifyLeft, justifyCenter, justifyRight pentru aliniere, foreColor pentru culoarea textului, formatBlock cu blockquote pentru citate, și insertHorizontalRule pentru linii de separare.

Lista completă de unelte pe care le poți integra

Editorul construit prin data URI poate include un set surprinzător de funcționalități. Iată ce poți adăuga fără nicio librărie externă, folosind doar execCommand și câteva linii de JavaScript:

Formatare text: Bold (B), Italic (I), Underline (U), Strikethrough (S) — cele patru formatări fundamentale. Le aplici pe textul selectat, le dezactivezi apăsând din nou același buton.

Headings și structură: H1, H2 și Paragraf (P) — transformă blocul curent în heading sau îl readuce la paragraf normal. Funcționează prin comanda formatBlock cu tagul HTML dorit.

Liste: UL (bullet list) și OL (numbered list) — prin insertUnorderedList și insertOrderedList. Chrome le gestionează automat, inclusiv indentarea și nested lists.

Aliniere: Left (L), Center (C), Right (R) — prin justifyLeft, justifyCenter și justifyRight. Util mai ales când compui texte care vor fi exportate ulterior.

Blockquote și linie orizontală: BQ formatează textul ca citat cu border lateral, iar -- inserează un hr vizual. Ambele adaugă structură vizuală fără efort.

Selectare font și dimensiune: Prin două elemente select poți schimba fontul (Georgia, Arial, Verdana, Courier New etc.) și dimensiunea textului (de la Mic la XXL). Chrome aplică aceste modificări direct pe selecție prin comenzile fontName și fontSize.

Culoare text: Patru butoane rapide colorate — teal, roșu, verde și negru — care schimbă culoarea textului selectat prin foreColor. Poți adăuga oricâte culori vrei prin duplicarea butonului cu un alt cod hex.

Undo și Redo: Butoanele Z și Y care apelează comenzile undo și redo. Chrome păstrează un istoric complet al modificărilor, deci poți naviga înapoi și înainte fără limită.

Clear formatting: Butonul X apelează removeFormat și elimină toată formatarea de pe textul selectat, readucându-l la text simplu.

Dacă te interesează și formatarea codului HTML pe care îl generezi, poți folosi HTML Compressor pentru minificare sau HTML Previewer pentru vizualizare rapidă direct din browser.

Cum funcționează salvarea — export în TXT, HTML și DOC cu formatare păstrată

Un editor fără posibilitatea de a salva este doar un toy. Din fericire, JavaScript nativ oferă tot ce ai nevoie pentru a genera fișiere descărcabile direct din browser, fără niciun server. Tehnica se bazează pe Blob și URL.createObjectURL(). Cel mai important aspect: exporturile HTML și DOC folosesc innerHTML, ceea ce înseamnă că toată formatarea — bold, italic, underline, culori, headings, liste — se păstrează exact cum ai editat-o.

Iată funcția completă de salvare care suportă trei formate:

function s(f) {
  var e = document.getElementById('e'), b, n;
  
  if (f == 'txt') {
    b = new Blob([e.innerText], {type: 'text/plain'});
    n = 'notepad.txt';
  } 
  else if (f == 'doc') {
    b = new Blob([
      '<html xmlns:o="urn:schemas-microsoft-com:office:office"' +
      ' xmlns:w="urn:schemas-microsoft-com:office:word"' +
      ' xmlns="http://www.w3.org/TR/REC-html40">' +
      '<head><meta charset="utf-8">' +
      '<style>body{font-family:Calibri,sans-serif;' +
      'font-size:12pt;line-height:1.6;color:#000;margin:2cm}' +
      'h1{font-size:22pt;font-weight:bold}' +
      'h2{font-size:16pt;font-weight:bold}' +
      'blockquote{border-left:3px solid #0891b2;' +
      'padding-left:12px;color:#555}</style>' +
      '</head><body>' + e.innerHTML + '</body></html>'
    ], {type: 'application/msword'});
    n = 'document.doc';
  } 
  else {
    b = new Blob([
      '<!DOCTYPE html><html><head><meta charset="utf-8">' +
      '<style>body{font:17px/1.8 Georgia,serif;' +
      'max-width:780px;margin:40px auto;padding:0 24px;' +
      'color:#222}h1{font-size:2em}h2{font-size:1.5em}' +
      'a{color:#0891b2}blockquote{border-left:3px solid ' +
      '#0891b2;padding-left:14px;color:#555}</style>' +
      '</head><body>' + e.innerHTML + '</body></html>'
    ], {type: 'text/html'});
    n = 'document.html';
  }
  
  var a = document.createElement('a');
  a.href = URL.createObjectURL(b);
  a.download = n;
  a.click();
  URL.revokeObjectURL(a.href);
}

Cheia este proprietatea e.innerHTML folosită în exporturile HTML și DOC. Spre deosebire de innerText care extrage doar textul simplu, innerHTML păstrează toate tagurile HTML generate de formatare: taguri strong pentru bold, taguri em pentru italic, atribute style pentru culori, taguri h1 și h2 pentru headings, și orice altă formatare aplicată din toolbar. Când deschizi fișierul .doc în Word sau fișierul .html în browser, totul apare exact cum l-ai formatat în editor.

Formatul TXT folosește în mod intenționat innerText deoarece scopul este un fișier text curat, fără formatare — ideal pentru notițe rapide sau procesare ulterioară.

Formatul DOC include namespace-urile Microsoft Office (xmlns:o și xmlns:w) care ajută Word să interpreteze corect documentul. Stilurile CSS din header definesc dimensiunile implicite ale headings-urilor și formatarea blockquote, iar marginea de 2cm reproduce marginile standard dintr-un document Word.

Formatul HTML generează o pagină web autonomă cu stiluri pentru tipografie, lățime maximă de 780px și centrare automată — gata de publicare sau vizualizare.

Tehnica de download prin createObjectURL funcționează fără server deoarece browserul creează un URL temporar local către datele din Blob. Elementul anchor invizibil cu atributul download declanșează descărcarea automată. Apelul revokeObjectURL la final eliberează memoria.

Word counter integrat — numărătoare de cuvinte în timp real

Orice editor de text are nevoie de un contor de cuvinte. Adăugarea acestuia în editorul nostru necesită doar un event listener pe input și câteva linii de logică:

document.getElementById('e').addEventListener('input', function() {
  var t = this.innerText.trim();
  document.getElementById('w').textContent = 
    (t ? t.split(/\s+/).length : 0) + 'w';
});

La fiecare tastare, funcția extrage textul simplu, îl trimează, îl împarte după spații și numără elementele rezultate. Rezultatul apare într-un span din toolbar (id="w") afișat ca „42w" — compact și vizibil permanent. Dacă ai nevoie de o analiză mai detaliată — densitate cuvinte cheie, număr caractere, propoziții — poți folosi Word Counter PRO sau Keyword Density Checker de pe seotoolpro.ro.

Codul complet al editorului — gata de copiat

Mai jos ai codul complet al editorului Chrome Notepad cu tema albă. Este un singur rând data URI pe care îl copiezi și îl lipești direct în bara de adrese a Chrome. Conține toolbar cu toate uneltele, export în trei formate cu formatare păstrată și word counter integrat:

data:text/html,<html><head><style>*{margin:0;box-sizing:border-box}
body{background:%23fff;color:%231a1a2e;font-family:system-ui}
%23t{display:flex;gap:2px;padding:8px%2012px;background:%23f5f5f7;
border-bottom:1px%20solid%20%23d4d4d8;flex-wrap:wrap;align-items:center}
%23t%20button{background:none;border:1px%20solid%20transparent;
color:%23555;width:34px;height:34px;border-radius:7px;cursor:pointer;
font:bold%2013px%20monospace;display:flex;align-items:center;
justify-content:center;transition:.15s}
%23t%20button:hover{background:%23e4e4e7;color:%23111;border-color:%23ccc}
%23t%20select{background:%23fff;border:1px%20solid%20%23d4d4d8;
color:%23333;padding:4px%208px;border-radius:7px;height:34px;
font:13px%20system-ui;cursor:pointer}
%23t%20.s{width:1px;height:22px;background:%23d4d4d8;margin:0%206px}
.sp{flex:1}%23t%20.i{font:11px%20monospace;color:%23999}
%23e{min-height:calc(100vh%20-%2052px);padding:40px%2060px;
outline:none;font:18px/1.8%20Georgia,serif;color:%231a1a2e;
caret-color:%230891b2}
%23e:empty::before{content:'Scrie%20aici...';color:%23bbb;
pointer-events:none}
%23e%20h1,%23e%20h2{color:%23111}
%23e%20blockquote{border-left:3px%20solid%20%230891b2;
padding-left:14px;color:%23666;margin:.5em%200}
%23e%20hr{border:none;border-top:1px%20solid%20%23e4e4e7;margin:1em%200}
::selection{background:%230891b220}
</style></head><body>
<div%20id=t>
<button%20onclick="c('bold')"><b>B</b></button>
<button%20onclick="c('italic')"><i>I</i></button>
<button%20onclick="c('underline')"><u>U</u></button>
<button%20onclick="c('strikethrough')"><s>S</s></button>
<span%20class=s></span>
<button%20onclick="c('formatBlock','<h1>')">H1</button>
<button%20onclick="c('formatBlock','<h2>')">H2</button>
<button%20onclick="c('formatBlock','<p>')">P</button>
<span%20class=s></span>
<button%20onclick="c('insertUnorderedList')">UL</button>
<button%20onclick="c('insertOrderedList')">OL</button>
<button%20onclick="c('formatBlock','<blockquote>')">BQ</button>
<button%20onclick="c('insertHorizontalRule')">--</button>
<span%20class=s></span>
<button%20onclick="c('justifyLeft')">L</button>
<button%20onclick="c('justifyCenter')">C</button>
<button%20onclick="c('justifyRight')">R</button>
<span%20class=s></span>
<select%20onchange="c('fontName',this.value)">
<option>Georgia</option><option>system-ui</option>
<option>Arial</option><option>Verdana</option>
<option>Courier%20New</option></select>
<select%20onchange="c('fontSize',this.value)">
<option%20value=2>Mic</option>
<option%20value=3%20selected>Normal</option>
<option%20value=4>Mare</option>
<option%20value=5>XL</option>
<option%20value=7>XXL</option></select>
<span%20class=s></span>
<button%20onclick="c('foreColor','%230891b2')"
  style=color:%230891b2>A</button>
<button%20onclick="c('foreColor','%23ef4444')"
  style=color:%23ef4444>A</button>
<button%20onclick="c('foreColor','%2316a34a')"
  style=color:%2316a34a>A</button>
<button%20onclick="c('foreColor','%231a1a2e')"
  style=color:%231a1a2e>A</button>
<span%20class=s></span>
<button%20onclick="c('removeFormat')">X</button>
<button%20onclick="c('undo')">Z</button>
<button%20onclick="c('redo')">Y</button>
<span%20class=sp></span>
<button%20onclick="s('txt')">TXT</button>
<button%20onclick="s('html')">HTM</button>
<button%20onclick="s('doc')">DOC</button>
<span%20class=i%20id=w>0w</span>
</div>
<div%20id=e%20contenteditable%20spellcheck=true></div>
<script>
function%20c(a,b){document.execCommand(a,false,b);
document.getElementById('e').focus()}
function%20s(f){var%20e=document.getElementById('e'),b,n;
if(f=='txt'){b=new%20Blob([e.innerText],
{type:'text/plain'});n='notepad.txt'}
else%20if(f=='doc'){b=new%20Blob(
['<html%20xmlns:o="urn:schemas-microsoft-com:office:office"
%20xmlns:w="urn:schemas-microsoft-com:office:word"
%20xmlns="http://www.w3.org/TR/REC-html40">
<head><meta%20charset="utf-8">
<style>body{font-family:Calibri,sans-serif;font-size:12pt;
line-height:1.6;color:%23000;margin:2cm}
h1{font-size:22pt;font-weight:bold}
h2{font-size:16pt;font-weight:bold}
blockquote{border-left:3px%20solid%20%230891b2;
padding-left:12px;color:%23555}</style></head>
<body>'+e.innerHTML+'</body></html>'],
{type:'application/msword'});n='document.doc'}
else{b=new%20Blob(
['<!DOCTYPE%20html><html><head>
<meta%20charset="utf-8">
<style>body{font:17px/1.8%20Georgia,serif;max-width:780px;
margin:40px%20auto;padding:0%2024px;color:%23222}
h1{font-size:2em}h2{font-size:1.5em}a{color:%230891b2}
blockquote{border-left:3px%20solid%20%230891b2;
padding-left:14px;color:%23555}</style></head>
<body>'+e.innerHTML+'</body></html>'],
{type:'text/html'});n='document.html'}
var%20a=document.createElement('a');
a.href=URL.createObjectURL(b);a.download=n;a.click();
URL.revokeObjectURL(a.href)}
document.getElementById('e').addEventListener('input',
function(){var%20t=this.innerText.trim();
document.getElementById('w').textContent=
(t?t.split(/\s+/).length:0)+'w'})
</script></body></html>

Acest cod este formatat pe mai multe rânduri pentru lizibilitate. În practică, trebuie să fie pe un singur rând continuu pentru a funcționa în bara de adrese. Poți folosi CSS Minifier sau JS Minifier de pe seotoolpro.ro dacă vrei să comprimi codul și mai mult.

Cum funcționează stilizarea — tema albă curată

Editorul folosește o temă albă cu fundal curat (#fff) și text închis (#1a1a2e) care reproduce experiența unui document clasic. Toolbar-ul are un fundal gri foarte deschis (#f5f5f7) cu o bordură subtilă (#d4d4d8) care îl separă vizual de zona de editare — similar cu toolbar-urile din Google Docs sau Pages. Butoanele sunt inițial gri mediu (#555) și devin negre la hover, cu un efect de tranziție de 150ms care dă un feeling fluid.

Separatorii dintre grupurile de butoane (clasa .s) sunt linii verticale de 1px care organizează vizual toolbar-ul fără a ocupa spațiu. Zona de editare folosește fontul Georgia la 18px cu line-height de 1.8 — o combinație clasică pentru confortul lecturii și scrierii lungi. Caret-ul (cursorul de text) este colorat în teal (#0891b2) pentru vizibilitate optimă pe fundal alb.

Placeholder-ul „Scrie aici..." apare doar când editorul este gol, folosind pseudo-elementul CSS ::before pe selectorul :empty. Dispare automat la prima tastare. Selecția de text folosește o nuanță transparentă de teal (#0891b220) care nu perturbă citirea. Dacă vrei să experimentezi cu culorile, Color Picker de pe seotoolpro.ro te ajută să găsești codurile hex exacte, iar RGB to HEX convertește rapid între formate.

Limitări importante de care trebuie să știi

Înainte să îți faci acest editor notepad-ul principal, sunt câteva limitări pe care trebuie să le cunoști. Prima și cea mai importantă: nu există auto-save. Dacă închizi tab-ul, tot conținutul dispare. Soluția rapidă este să salvezi frecvent în TXT, HTML sau DOC folosind butoanele de export. O alternativă ar fi adăugarea localStorage în cod, dar asta ar mări semnificativ data URI-ul.

A doua limitare: document.execCommand este depreciat. MDN îl marchează ca deprecated de câțiva ani, dar în 2026 funcționează în continuare în Chrome, Edge, Safari și Firefox. Nu va fi eliminat prea curând deoarece milioane de aplicații web depind de el, iar alternativa (Input Events Level 2 cu beforeinput) este mult mai complexă de implementat.

A treia limitare ține de lungimea URL-ului. Chrome acceptă data URI-uri de câțiva megabytes, dar bara de adrese devine impracticabilă vizual peste 2-3KB. Editorul nostru complet are circa 4.8KB encoded — funcționează perfect, dar nu mai poți vedea tot URL-ul. Alternativa este să salvezi codul ca fișier HTML și să-l deschizi local.

A patra limitare: exportul TXT nu păstrează formatarea. Acest lucru este intenționat — TXT înseamnă text simplu, fără bold, culori sau headings. Dacă ai nevoie de formatare în fișierul exportat, folosește HTM sau DOC care salvează totul exact cum ai editat — bold, italic, culori, headings, liste, aliniere. Poți oricând verifica structura HTML generată cu Get Source Code pentru debugging.

Cum salvezi trucul permanent în Chrome

Cel mai practic mod de a avea editorul mereu la îndemână este să-l salvezi ca bookmark. Pașii sunt simpli: copiezi întregul data URI, deschizi un tab nou, lipești în bara de adrese și apeși Enter pentru a confirma că funcționează. Apoi dai Ctrl+D (sau Cmd+D pe Mac) pentru a adăuga bookmarkul. Îi dai un nume scurt, de exemplu „Notepad", și îl plasezi în Bookmarks Bar pentru acces cu un singur click.

O altă opțiune este să salvezi codul ca fișier HTML pe desktop. Creezi un fișier nou cu extensia .html, lipești codul (versiunea decodificată, nu data URI), și îl deschizi cu Chrome oricând ai nevoie. Avantajul acestei metode este că poți edita și personaliza codul mai ușor — schimbi culorile, adaugi butoane noi, modifici fonturile.

Dacă vrei și mai mult control, poți transforma editorul într-un PWA simplu adăugând un manifest.json și un service worker. Dar asta depășește scopul trucului rapid pe care îl prezentăm aici.

De ce este util acest truc în practică

Dincolo de factorul „wow", editorul Chrome Notepad are aplicații practice reale. Copywriterii îl folosesc pentru drafturi rapide fără distrageri — niciun meniu, nicio notificare, doar text. Developerii îl folosesc pentru a nota snippeturi de cod sau a formata rapid un text înainte de a-l lipi altundeva. Studenții îl folosesc ca notepad în timpul cursurilor online, direct în browserul unde au deja materialele deschise.

Funcția de export DOC este surprinzător de utilă în situații de urgență — când ai nevoie de un document Word rapid și nu ai acces la Google Docs sau Microsoft Office. Scrii textul, formatezi cu headings și bold, apeși DOC, și ai un fișier cu toată formatarea păstrată pe care îl poți trimite prin email imediat.

Un alt use case este testarea de conținut SEO. Scrii textul, verifici cu word counter-ul integrat dacă ai lungimea dorită, apoi copiezi și analizezi cu Keyword Density Checker sau Grammar Checker de pe seotoolpro.ro. Este un workflow compact care nu necesită nicio altă aplicație.

Trucuri bonus cu data URI în Chrome

Editorul de text nu este singurul lucru pe care îl poți construi cu data:text/html. Iată câteva idei pe care le poți explora folosind aceeași tehnică:

Calculator rapid: Un input field și o funcție eval() (cu sanitizare!) care evaluează expresii matematice. Lipești în bara de adrese și ai un calculator instant, fără site, fără extensie.

Timer / cronometru: Un display cu setInterval care numără secundele. Util în prezentări sau când ai nevoie de un timer rapid fără să cauți o aplicație.

Color picker minimal: Un input de tip color și un span care afișează codul hex. Mai rapid decât orice site sau extensie — deși dacă ai nevoie de funcționalități avansate, Color Picker rămâne opțiunea completă.

JSON formatter: Un textarea unde lipești JSON și un buton care apelează JSON.stringify cu indentare. Instant formatting fără să trimiți datele pe niciun server.

Toate aceste mini-aplicații urmează același principiu: HTML + CSS + JavaScript inline, totul encodat URL-safe, totul rulat local în browser. Este practic programarea în forma sa cea mai pură — zero dependențe, zero infrastructură, zero latency.

Concluzie

Trucul data:text/html transformă Chrome dintr-un browser într-o platformă de micro-aplicații. Editorul pe care l-am construit în acest articol demonstrează că poți avea un tool funcțional — cu formatare, export cu formatare păstrată și word count — dintr-un singur rând de cod lipit în bara de adrese. Nu este un înlocuitor pentru Google Docs sau Word, dar este cel mai rapid drum de la zero la un editor funcțional.

Copiază codul, salvează-l ca bookmark, personalizează-l după preferințe, și ai un notepad permanent care nu depinde de niciun serviciu extern. Dacă vrei să duci conținutul scris cu acest editor la următorul nivel, explorează suita completă de unelte SEO gratuite de pe seotoolpro.ro — de la Article Rewriter pentru reformulare, la Plagiarism Checker pentru verificarea originalității, și Meta Tag Generator pentru optimizarea SEO a conținutului publicat.

Dacă vrei să aprofundezi și alte tehnici web moderne, citește și articolele noastre despre 5 trucuri HTML și CSS pe care developerii le ascund și cum faci un site HTML simplu fără experiență.

Try Pro Calculatoare Inteligente Practice! CLICK HERE

Get MTDb.ro -Filme si Seriale, Trailere, Actori si Stiri din Cinema - CLICK HERE