CSS ir praturtinto teksto redaktoriai

Dažniausiai svetainėse, valdomose turinio valdymo sistemomis, turinys dedamas ne iškart dokumento <body> bloke, o giliau atskirame <div> bloke (ar — vaje, kokia gėda — lentelėje <table>). Ir neretai to vidinio bloko stilius skiriasi nuo paties dokumento stiliaus. Jei turinio valdymo sistemoje integruotas praturtinto teksto redaktorius, gebantis naudoti svetainės stilių, susiduriame su problema — redaguojamas turinys neatitinka tos išvaizdos, kuri bus svetainėje. Šios problemos sprendimas šitame straipsnyje.

Skirtingose naršyklėse veikiantys praturinto teksto redaktoriai, kaip kad TinyMCE, naudoja įterptinius rėmelius <iframe> savo pagrindui. Įterptiniui rėmeliui aktyvuojama redaguojamumo savybė, o rėmelio šaltiniu tampa naujas dokumentas su redaguojamo lauko turiniu dokumento <body> bloke. Pakraunamas svetainės pakopinių stilių failas ir redaguojamas turinys įgyja <body> žymei nurodytą stilių.

Tarkime, turime svetainę, kurioje tamsiame margame fone centruotas vienspalvis šviesus turinio blokas su tamsiom raidėm. Kai turinį redaguosim, įterptiniame rėmėlyje matysime ne tamsias raides šviesiame fone, o tamsias raides tamsiame margame fone. Taip atsitiks todėl, kad dokumento <body> stilius skiriasi nuo turinio bloko stiliaus, o praturtinto teksto redaktorius turinį deda ne į turinio bloką kaip svetainėje, o tiesiai į <body>.

Vienas iš sprendimų būtų pasiredaguoti praturtinto teksto redaktorių, kad tas apgauptų turinį atitinkamu turinio bloku, tačiau šis sprendimas gali pasirodyti komplikuotas. Reiktų įsigilinti į redaktoriaus ir turinio valdymo sistemos architektūrą, ir rašyti hakus, kurie ypač pasunkintų praturtinto teksto redaktoriaus atnaujinimą ateityje.

Mano siūlomas sprendimas būtų atitinkamai paredaguoti pakopinių stilių failą ir vienu prisilietimu pakeisti svetainės šabloną. Štai žingsniai, kuriuos reiktų atlikti:

  1. Visą <body> žymei skirtą stilių priskirti tarkim CSS klasei „websiteBody“. Pavyzdžiui, tokį: 
    
body {
    color: black; /* tamsus tekstas */
    background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
}

    perrašom taip:

    
body {}
.websiteBody {
    color: black; /* tamsus tekstas */
    background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
}
  2. Visas <body> priklausomybes perrašyti CSS klasei „websiteBody“. Pavyzdžiui, tokį: 
    
body blockquote { /* visoms citatoms, kurios yra body dalyje */
    margin: 0px;
    margin-left: 30px;
}

    perrašom taip:

    
.websiteBody blockquote { /* visoms citatoms, kurios yra body dalyje */
    margin: 0px;
    margin-left: 30px;
}
  3. Turinio bloko stilių nukopijuot į <body> aprašus, kurie būtų prieš „websiteBody“ klasės aprašus. Pavyzdžiui, taip: 
    
body {
    color: black; /* tamsus tekstas */
    background: yellow; /* šviesus vienspalvis fonas*/
}
.websiteBody {
    color: black; /* tamsus tekstas */
    background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
}
  4. Galiausiai <body> žymei svetainės šablone priskirti CSS klasę „websiteBody“: 
    <body class="websiteBody">

Kadangi turinio valdymo sistemose naudojami praturinto teksto redaktoriai <body> žymę dokumente sukurs be CSS klasės, tai visam redaguojamam turiniui bus nurodytas toks stilius, kaip ir svetainėje turinio bloke. Tuo tarpu, svetainėje <body> stiliaus taisyklės bus perrašytos „websiteBody“ klasėje nurodytomis taisyklėmis, nes priskiriant taisykles, klasės turi didesnio prioriteto svarbą.

Šita gudrybė sėkmingai panaudota ne vienam mano projekte ir aš savo patirtį be gailesčio perduodu Tau!

Tags: ,

This entry was posted on Sunday, April 2nd, 2006 at 02:32 and is filed under Techniška. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

If you liked this entry, you may also like:

No Responses to “CSS ir praturtinto teksto redaktoriai”

  1. pumba says:
    April 4, 2006 at 22:51

    mano 2 centai:
    * WYSIWYG webui yra gaidys
    * yra gaidys
    * CMS yra gaidys (ar bent jau over-hyped)

    Reply
  2. pumba says:
    April 4, 2006 at 22:53

    antras punktas apie iframe turejo but. HTML’o ne-escape’inimas, kaip sita sistema daro, irgi gaidys. kol kas tiek :)

    Reply
  3. Archatas says:
    April 5, 2006 at 13:22

    Kam gaidys, kam ne…
    Baisiai, galvoji, kokiam batsiuviui rūpi HTML kodai, kai jis nori svetainę savo turėt?

    Reply
  4. gedasg says:
    April 10, 2006 at 08:39

    gera infa, fenks, p.s pumba tu tikras lietuvis

    Reply

Leave a Reply