Scrieți corect on-line WYSIWYG-editor

Introducere și înțelegere a problemelor

De ce face acest lucru

Nota 1: Mozilla Firefox și va continua să se unească numele Gecko (numele motorului).

Nota 2: Atâta timp cât Opera 9 nu este o eliberare, astfel încât atunci scrie despre el. În general, punerea în aplicare a designMode în Opera este similar cu punerea în aplicare a unei astfel în Gecko.

Dar el are un dezavantaj serios - să-l numim „sindromul Ward“ - predominanța aspectului vizual al logicii, atunci când, relativ vorbind, titlul în lucrare se face prin emiterea unui mare și îndrăzneț. În proiectul nostru, încercăm să evităm acest dezavantaj (sau cel puțin reducerea la minim).

Cum trebuie să fie (corecta WYSIWYG)

încarnare

Așa că munca noastră va fi de a pune în aplicare aceste caracteristici suplimentare.

Notă: Deoarece războiul browser-ul nu a fost încă încheiat, avem nevoie de browsere diferite pentru a scrie cod diferit. Distingem între browsere prin verificarea cod ce le sprijină, și ceea ce - nu. Acest lucru ne va permite să nu deranjeze verificarea userAgent'ov și versiuni.

Deci, constatăm că avem nevoie de:

  • Acest site este necesar pentru a evidenția tag-ul de bloc (din fericire, există o FormatBlock echipă) cu clasa atributul dorit (și nu este nimic gata acolo) sau fără ea.
  • Efectuarea tag-ul necesar separarea interline (inline) cu clasa sau nu.
  • atribute (cea mai mare parte Atribuirea clase) obiecte de tip text - imagini (este încă util să se atribuie src și ALT), tabele, linii
    .
  • Curățarea de formatare nu este adecvat în conformitate cu foaia de stil dat (util la copierea textului din documente Microsoft Office, precum și alte pagini web, și așa mai departe. D.).

edita panoul

Cross-browser panoul de modificare este un document. designMode care proprietatea este setată pe „On“. Pentru ca de obicei, nu avem nevoie pentru a edita întregul conținut al ferestrei browserului, este convenabil de a intra în acest document în cadru (normal - cadru sau plutirea - iframe).

Vom rezolva această problemă, după cum urmează:

În același timp, în acest document pot fi introduse stiluri podgruzku descărcabile:

,

De asemenea, foaia de stil poate fi asociat cu documentul încărcat în iframe, prin crearea unei metode DOM in head'e sale tip de element . arătând spre un fișier cu o foaie de stil.

Odată cu atribuirea de conținut poate fi unele probleme legate de faptul că cesiunea trebuie să se facă după fiecare onload'ov posibil și după un interval de timp după instalarea designMode (în MSIE). Puteți oferi această soluție:
După un try-catch () încearcă să atribuie innerHTML. dacă nu, face un pic setTimeout și încercați din nou. Practica arată că, chiar și cu un timp de expirare în milisecunde 0 buclare nu are loc. Puteți face o misiune și a fost inițial un timp de expirare.

Nota 1: Mai întâi am stabilit designMode, apoi atribuiți conținut.

Începe scrierea de cod.


Puteți adăuga un buton pentru a comuta între moduri:

Acum, nu ne gândim la o anumită funcționalitate. Puteți face o casetă de selectare, puteți face file de comutare „Normal - HTML“ și așa mai departe ..

Alocarea / Selectare

Dacă vrem să avem imaginea specificați clasa, va trebui să identifice obiectul său. Dacă vrem să pună un link la acesta - textul.

Funcția de bază cu un preparat cu eliberare a izolării inițiale și finale a nodurilor. Din această pereche, putem obține întregul set de noduri incluse în selecția avem nevoie de tipuri.

Obținerea de unități de alocare inițiale și finale (precum și cel mai apropiat strămoș comun)

Notă: Nu este non-trivial, asociată cu „ciudat“ punerea în aplicare a alocării în MSIE.

Obținem o listă a tuturor nodurilor cu un anumit nume de etichetă situată între începutul și sfârșitul descărcării

Când aplicăm la unități sau în linie de comandă formatarea o etichetă specială cu o anumită clasă, putem obține o mulțime de unități, așa că suntem interesați nu numai începutul și sfârșitul. Banal trece pe nextSibling'am nu sunt adecvate, deoarece Avem nevoie de un filtru poate procesa by-pass creștere și căderea unui copac de noduri. Prin urmare, algoritmul este - obtinerea de cel mai apropiat părinte comun (rădăcină), subarborele dintre descendenții săi, de începere și terminare noduri limitate, selectați toate componentele necesare.

funcție, cel mai probabil nevoie de optimizare, așa cum este scris prin variabila globală.

Cel mai apropiat părinte cu tag-ul dreapta

Nodul de intrare și de a da o etichetă de nume. În cazul în care nodul este potrivesc deja tag-ul în cazul în care nu are parentală corespunzătoare sau dacă numele tag-ul este gol, returnează acest nod. În caz contrar, returnează cel mai apropiat părintele care are eticheta de nume dreapta.

O matrice a tuturor nodurilor cu tag-ul dorit prins în selecție

blocuri de formatare

API-ul are o echipa formatBlock. blocul ei de intrare este dat o etichetă de nume și atrage alocarea actuală a acestei etichete.
De exemplu:
document.execCommand ( "formatBlock" false "

„).

Apoi, totul este simplu - folosim această comandă, și apoi alegeți din selecția a numelui pe care toate etichetele (tagName), și care definesc ClassName necesare:

Format Word (inline)

Declaratie: clean_nodes zakrossbrauzerit

ERORI:
1: MSIE: lacune la limită dispar (. Prins în izolarea și extreme reatribuirea acestea aparent din cauza innerHTML)
2: uneori MSIE atunci când se utilizează în linie de formatare imediat câteva paragrafe ale textului rămâne verde (magic_unusual_color). În mozile, de altfel, de asemenea, uneori, dar în circumstanțe diferite. Se poate selecta toate fonty a întregului document, nu doar de la lansare? // Kruglov

Lucrul cu liste

Aceasta se referă la locul de muncă cu liste numerotate sau cu marcatori. Din fericire, în API-ul este aproape acolo (și chiar mai mult decât este nevoie, dar să nu ne pripim).

Vrem să transformăm paragrafele în cele două tipuri de liste, și vice-versa, precum și de a gestiona listele imbricate (schimbare de indentare).

Aici este o listă de comenzi disponibile în API designMode: