Írja a megfelelő online WYSIWYG-szerkesztő

előző ◈ a következő

Bevezetés és problémák megértését

Miért is

1. megjegyzés: Mozilla és a Firefox továbbra is egyesíteni Gecko a nevét (a motor).

2. megjegyzés: Amíg az Opera 9 nem kiadás, így akkor írj róla. Általánosságban, a végrehajtás designMode Opera hasonló végrehajtásának ilyen a Gecko.

De van egy komoly hátránya - nevezzük őt „Ward szindróma” - a túlsúlya a vizuális elrendezés a logika, amikor, viszonylag szerény, a főcím a papír történik kibocsátásával nagy és merész. A mi projekt, igyekszünk elkerülni ezt a hátrányt (vagy legalábbis minimalizálni).

Hogyan kell lennie (korrigálni WYSIWYG)

megtestesülés

Annak érdekében, hogy munkánk lesz, hogy végre ezeket a kiegészítő funkciókat.

Megjegyzés: Mivel a böngésző háború még nem ért véget, van szükség a különböző böngészők írni különböző kódot. Megkülönböztetünk böngészők ellenőrzi, hogy milyen kódot támogatják, és mi - nem. Ez lehetővé teszi számunkra, hogy ne zavarja ellenőrzése userAgent'ov és változatok.

Tehát kijelenthetjük, hogy szükség van:

  • Tegyünk ki kell emelni a blokk tag (szerencsére van egy csapat FormatBlock) a kívánt attribútum osztály (és nincs semmi, kész van), vagy anélkül.
  • Így a szükséges interline szétválasztás (inline) tag az osztályban, vagy sem.
  • Hozzárendelése attribútumok (többnyire osztályokba) szöveges objektumok - képek (még mindig hasznos rendelni az src és alt), asztalok, vonalak
    .
  • Tisztítás formázás nem alkalmas az adott stíluslap (hasznos, ha szöveget másol Microsoft Office dokumentumok és egyéb internetes oldalak, és így tovább. D.).

szerkesztőpanelben

Határon böngésző szerkesztési panelt egy dokumentum. designMode, ahol az ingatlan értéke „Be”. Mivel általában nem kell módosítani a teljes tartalmát a böngésző ablakot, célszerű belépni ezt a dokumentumot a keretbe (normál - frame vagy változó - iframe).

Mi lesz megoldani ezt a problémát az alábbiak szerint:

Ugyanakkor ebben a dokumentumban lehet megadni terhelhető podgruzku stílusok:

,

Továbbá, a stíluslap köthető dokumentum betöltve az iframe, létrehoz egy DOM módszereket alkalmaz elem típusa head'e . mutatva, hogy egy fájlt egy stíluslap.

A feladat a tartalom lehet némi probléma összefügg azzal a ténnyel, hogy a hozzárendelés után kell elvégezni, minden lehetséges onload'ov után időtúllépés telepítés után designMode (az MSIE). Ön tud nyújtani ez a megoldás:
Miután egy try-catch () megpróbálja hozzárendelni a innerHTML. ha nem, akkor egy kis setTimeout és próbálja újra. A gyakorlat azt mutatja, hogy még az időtúllépés ezredmásodpercben 0 hurok nem fordul elő. Megteheti egy megbízást, és eredetileg egy timeout.

1. megjegyzés: Először állítsa designMode, majd adjon tartalmat.

Kezdjük kódot.


Felvehet egy gombot módok:

Most nem gondol egy adott funkciót. Tudod, hogy egy négyzetet, akkor lehet, hogy kapcsoló lapok „Normal - HTML”, és így tovább ..

Allocation / Selection

Ha azt akarjuk, hogy a kép adja meg az osztály, mi lesz, hogy azonosítsa a tárgyat. Ha azt akarjuk, hogy egy linket, hogy - a szövegben.

Bázis funkciót egy hatóanyagleadású készítmény a kezdeti és végső elkülönítő csomópontok. Ebből pár tudjuk, hogy az egész csomópontok halmaza tartalmazza a kiválasztási szükségünk típusok.

Szerezze kezdeti és végső elosztása egységek (valamint a legközelebbi közös őse)

Megjegyzés: Van egy nem triviális, társított „furcsa” végrehajtása allokáció MSIE.

Kapunk egy listát az összes csomópont egy adott címke nevét között fekvő kezdete és vége mentesítés

Amikor alkalmazni egységek vagy inline formázási parancs egy adott tag egy bizonyos osztály, akkor kap egy csomó egység, így mi érdekli nemcsak a kezdő és záró. Banális át a nextSibling'am nem alkalmas, mert Szükségünk van egy szűrő képes feldolgozni bypass tündöklése és bukása egy fa csomópontok. Ezért az algoritmus - egyre legközelebbi közös szülő (gyökér), a részfáját utódai, a korlátozott kezdete és vége csomópontok, jelölje ki az összes szükséges alkatrészeket.

funkció, valószínűleg szüksége optimalizálás, ahogy meg van írva a globális változót.

A legközelebbi szülő a megfelelő címke

A bemeneti csomópont és ad egy névtáblát. Ha a csomópont már illeszkedik a címkét, ha nem rendelkezik a megfelelő szülői, vagy ha a tag neve üres, visszatér a csomóponttal. Különben visszaküldi a legközelebbi szülő, akinek joga van neve.

Egy tömb minden csomópont a kívánt címkét fogott a kiválasztási

formázás blokkok

Az API egy csapat formatBlock. neki bemeneti blokk kap egy névtáblát, és hívja fel a jelenlegi elosztása ezt a címkét.
Például:
document.execCommand ( "formatBlock" false "

„).

Ezután minden egyszerű - használjuk ezt a parancsot, majd válassza ki a válogatott a nevet az összes tag (tagName), és amelyek meghatározzák a szükséges className:

Format Szó (inline)

Nyilatkozat: zakrossbrauzerit clean_nodes

HIBÁK:
1: MSIE: határ rések eltűnnek (csapdába izolálására és extrém ott látszólag miatt megváltoztató innerHTML.)
2: néha MSIE használata inline formázás azonnal néhány bekezdésben a szöveg zöld marad (magic_unusual_color). A mozile mellesleg is néha, de más körülmények között. Válassza ki az összes FONTY a dokumentum teljes, nem csak a kiadás? // Kruglov

Listák

Ez arra utal, hogy működjön együtt számozott vagy felsorolásjeles listák. Szerencsére az API majdnem ott (és még többet, mint amennyit kell, de ne rohanjunk előre).

Azt akarjuk, hogy átalakítsa a bekezdések a kétféle lista, és fordítva, valamint kezelni beágyazott listák (változás behúzás).

Itt van egy lista a rendelkezésre álló parancsok designMode API:

előző ◈ a következő