Gå til innhold

Rich Text editor - CSS konflikt


Anbefalte innlegg

Har tatt ibruk TinyMCE nå for å generere fritekst. Selve editoren fungerer bra, men får et problem med resultatet. Det er her min fantastiske CSS rot kommer inn. HTMLen som ble generert av TinyMCE er bare rot. Dette har egentlig ingen ting med TinyMCE og gjøre, men at jeg har CSS på parent-elementet som påviker den! Selve teksten i editoren er en iframe ser jeg. Må jeg bruke iframe på resultatet og da?? Kan ikke si jeg har sett noen gjøre det slik på resultatet.

 

Her er bilde fra editoren:

post-51807-0-56820900-1320684843_thumb.png

 

Og her blir resultatet:

post-51807-0-67607800-1320684865_thumb.png

 

Som du ser er den påvirket av parent UL-elementet over, "#slideDiv #section li".

 

Finnes det noen måte å få child UL-elemente til å "ignorere" alt av CSS fra parents..? Lurte også på om å bruke YUI CSS reset (CSS fila) for hele UL elementet.

Hvis ikke det er noe angående CSS struktureringa mi jeg ikke har helt fatta her...

 

 

(Forresten, hva for en RT/"WYSIWYG" editor bruker Diskusjon.no ..?)

Lenke til kommentar
Videoannonse
Annonse

.(klasse for det du ikke vil skal pavirkes) {
 (key som ikke skal pavirkes): (ny verdi);
 ...:...;
 ...:...;
}

Da må jeg jo sørge for å override absolutt alt. RT editoren bruker jo endel tags. Er dette eneste måten å gjøre det på altså??

Er det ikke mulig å lage en ID som BARE påvirker parent UL-elementet sitt LIs?

Lenke til kommentar
  • 2 uker senere...

Hvorfor har du stylet #section li og ikke #section div? Det er selve div'n som skal ha width/height om jeg ikke misforstår deg helt her?

 

Om du gjør det på denne måten vil du dermed ikke ha noen problemer med child ul/li elementene som kommer under (one, two, three)

 

*edit*:

 

Om jeg skjønner deg riktig her over kan det også funke fint.

<ul id="style1">
<li>
 rød

 <ul id="style2">
   <li>gul</li>
   <li>gul</li>
   <li>gul</li>
 </ul>

 rød
</li>
<li>rød</li>
<li>rød</li>
<li>rød</li>
</ul>

#style1 li {background-color:red}
#style2 li {background-color:yellow}

Endret av TekniskFeil
Lenke til kommentar

Hvorfor har du stylet #section li og ikke #section div? Det er selve div'n som skal ha width/height om jeg ikke misforstår deg helt her?

Den #section li kommer fra parent UL-en. Og den diven der er "ramma" for RT teksten.

 

 

Om jeg skjønner deg riktig her over kan det også funke fint.

<ul id="style1">
<li>
 rød

 <ul id="style2">
   <li>gul</li>
   <li>gul</li>
   <li>gul</li>
 </ul>

 rød
</li>
<li>rød</li>
<li>rød</li>
<li>rød</li>
</ul>

#style1 li {background-color:red}
#style2 li {background-color:yellow}

Kan ikke sette ID på den innerste UL-en siden den er generert av RT editoren.

 

Men jeg fikk fikset det på en måte. Jeg må bare være litt mer bevisst på hva ellers som kan påvirkes, og bruke flere CLASS for å skille ting.

 

Så også at man kan bruke > f.eks #section > li for å bare påvirke den første childen

Lenke til kommentar
  • 2 uker senere...

Merker bare at den bruk litt for lag tid på å loade. Nå loader jeg bare alle plugins fra advanced themet. Men vet ikke helt hvem av dem jeg skal fjerne bare for mitt bruk :hmm:

 

Og forresten, loader du bare "jquery.min.js", eller den "jquery.tinymce.js"?

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...