HTML5, editor HTML
Aceste două atribute nu sunt noi. Mai mult, suportul lor a fost adăugat în Internet Explorer 5 în zorii Internetului. La acea vreme, majoritatea dezvoltatorilor au abandonat utilizarea lor, considerându-le doar extensii Windows pentru Internet.
Dar, de-a lungul anilor, mai multe browsere au început să copieze abordarea practică, dar ciudată a IE pentru editarea HTML avansată. Toate browserele desktop acceptă în prezent aceste atribute, deși nu au făcut niciodată parte din standardul oficial.
Editarea elementelor cu atributul contentEditable
Luați în considerare primul instrument de editare HTML, atributul contentEditable. Adăugarea acestui atribut oricărui element vă permite să editați conținutul acelui element atunci când este afișat în fereastra browserului:
Cel mai probabil, nu veți observa nicio diferență în afișarea acestui text în browser. Dar făcând clic oriunde în textul redat de browser plasează cursorul de editare în el:
În exemplul de mai sus, zona editabilă
Unele browsere acceptă comenzi de formatare încorporate. De exemplu, în Internet Explorer, puteți face textul îngroșat, cursiv și subliniat folosind combinațiile de taste + , + și, respectiv, +. Puteți anula ultima editare în Firefox cu combinația de taste +. Toate aceste taste rapide pot fi folosite și în browserul Chrome.
Dar chiar dacă decideți că aveți nevoie de aceste caracteristici, atributele contentEditable și designMode pot să nu fie cea mai bună alegere pentru a le implementa. Ele nu oferă dezvoltatorului toate facilitățile unui instrument real de design web, cum ar fi comenzile pentru editarea markupurilor, capacitatea de a vizualiza și editaCod sursă HTML, verificatoare ortografice etc.
Editarea unei pagini cu atributul designMode
Atributul designMode este similar cu atributul contentEditabie, cu diferența că permite editarea întregii pagini web. Acest lucru poate părea puțin problematic, deoarece evenimentele elementului sunt dezactivate atunci când pagina este editată. Atunci cum putem apăsa butoanele pentru a controla procesul de editare? Soluția la această problemă este simplă - documentul care este editat este plasat în interiorul elementului, care se comportă ca o fereastră de editare super-puternică:
Acest exemplu ar trebui să vă ofere o idee despre posibilitățile de editare HTML. De exemplu, faceți clic pe o imagine pentru a o selecta pentru editare. Acum puteți redimensiona imaginea, o puteți trage într-o locație nouă sau o puteți șterge complet. Puteți face același lucru cu controalele de formular dacă pagina pe care o editați le conține.
Desigur, dacă doriți să transformați acest exemplu în ceva practic, atunci va trebui să-l perfecționați serios. Primul pas este să adăugați alte comenzi de editare. Dacă doriți să înțelegeți mai bine modelul de comandă, dezvoltatorii browserului Opera vă pot ajuta (vezi Editarea Rich HTML în browser: partea 1 și partea 2). Al doilea pas este să faceți ceva util cu marcajul editat, cum ar fi să îl trimiteți la server folosind obiectul XMLHttpRequest.
Încă un avertisment. Acest exemplu nu va rula de pe hard disk-ul local pe toate browserele. Internet Explorer și Chrome îl vor bloca din motive de securitate, dar nu va fi nicio problemă pe Firefox. Pentru testare, folosesc un server local.