[JS] CSS + execcommand

[BierPul]

Ik probeer in mn contenteditable div een style toe te wijzen aan een text range.

Ik heb een pulldown gemaakt met alle gewenste stijlen maar het wil niet lukken.

HTML:

   <select name="style" onChange="applyStyle(this[this.selectedIndex].value);">
                    <option selected>Stylen (css)</option>  
                    <option value= " ">Neutraal</option>     
                    <option value="normaletext">Normale text</option>
                    <option value="subkop">Subkop</option>
                    <option value="paginakop">Paginakop</option>
                    <option value="bijschrift">bijschrift</option>
                </select>

Functie applyStyle

JavaScript:

function applyStyle(style) {
        var code = foo.document.selection.createRange();
        code = code.replace(/<([\w]+) class=([^ |>]*)([^>]*)/gi, "");
        \s*<\/span>/gi,"");
        code.pasteHTML("<span Class='" + style + "'>" + code.htmlText + "</span>");
        alert(code.htmlText); 
}

Ik laat eerst een replace erop los om bestaande style te verwijderen

Ik krijg de volgende error en kan hem niet vinden

Deze eigenschap of methode wordt niet ondersteund door het object

[Verwijderd]

Wie geeft dan ook de naam 'style' aan een element?
Zo'n beetje elk HTML element heeft een style attribuut.

Overigens is zo'n select bijna niet te stylen.

offtopic:
En owja, laat in het vervolg even die boze smileys weg, jaja, zelfs dat staat in onze Topicstart Checklist

[ Voor 68% gewijzigd door Verwijderd op 14-05-2003 10:53 ]

[BierPul]

Hmmm het gaat niet om mn select maar om de text in mn div

[BierPul]

Het zit m in code.replace

Als ik dat weglaat doet hij het wel hij wijst dan 1 keer de juiste stijl toe maar als ik dan de stijl probeer aan te passen krijg ik een opeen hoping van styles

[Pelle]

Yo, kicken doe je niet al na 4 minuten.

[Bosmonster]

code:

var code = foo.document.selection.createRange();
code = code.replace(/<([\w]+) class=([^ |>]*)([^>]*)/gi, "");

van createRange() krijg je een range-object terug, die heeft inderdaad geen methode replace Misschien moet je van het range-object eerst even de content opvragen

zie ook:

http://msdn.microsoft.com/library

[BierPul]

Ik heb het ff wat overzichtelijker gemaakt

code:

function doCleanStyle(code) {    
    code = code.replace(/<([\w]+) class=([^ |>]*)([^>]*)/gi, "<$1$3");
    code = code.replace(/<([\w]+) style="([^"]*)"([^>]*)/gi, "<$1$3");
    code = code.replace(/<\/?\w+:[^>]*>/gi, "");
    code = code.replace(/<span([^>])*>(&nbsp;)*\s*<\/span>/gi,"");
    return code;
}

function applyStyle(stylecss) {
        var code = foo.document.selection.createRange();
        cleanCode = doCleanStyle(code.htmlText);
        code.pasteHTML("<span Class='" + stylecss + "'>" + cleanCode + "</span>");
}

Maar blijf die opeenhoping van stylen houden als ik in de output kijk krijg ik iets als zit

code:

<SPAN class=alineakop><SPAN class=paginakop><SPAN>asa</SPAN></SPAN></SPAN>

Niet echt de bedoeling

Op zicht ziet de style er dus best uit want de style wordt toegewezen aan de laatste span maar 1 van die spans heeft een padding dus dan gaat de nieuw span ook mee

[ Voor 67% gewijzigd door BierPul op 14-05-2003 11:15 ]

[crisp]

kwestie van je regexpen debuggen dus.
Ik zie in ieder geval al dat de nieuwe class die je wegschrijft omvat wordt door enkele quotes; dat zie ik in je regexp niet terug.
En wat als ik bijvoorbeeld dit stuk HTML in z'n geheel geselecteerd heb om italic te maken:

code:

dit is een stuk <span class="bold">geselecteerde</span> text

je regexps gaan hier denk ik een zooitje van maken...

[Bosmonster]

Misschien is het makkelijk om het MSHTML component gewoon z'n werk te laten doen en vervolgens in 1x je code op te schonen of te converteren naar css.

Probleem wat je met deze methode krijgt is dat er uiteindelijk gewoon niet meer mee te werken is Wat als iemand een stuk uit een span selecteert en een stuk erna? Of wat als je het 'normale' editor gedrag wilt hebben, dat als je iets vet maakt en vervolgens weer vet dat het dan weer gewoon is?... OF als iemand een stuk van een tabel selecteert of whatever... daat wil je echt niet aan beginnen

Is allemaal geen doen.. heb het ook wel eens geprobeerd

Het enige waar je echt de CSS voor nodig hebt zijn de font-tags die gebruikt worden voor fonts en sizes en die kun je heel makkelijk achteraf in 1x vervangen. Zo behoudt je ook het normale gedrag van het MSHTML component en de execCommand features. Voor de rest gebruikt het component allemaal prima html en zorgt er ook voor dat er geen dingen door elkaar komen te staan etc.

[ Voor 33% gewijzigd door Bosmonster op 14-05-2003 11:35 ]

[BierPul]

Uhmm ik snap wat je bedoelt als je text halverwegen een span selecteerd neemt ie de span class niet mee en kan die ook niks replacen

Is er geen andere mannier om dit te fixen want het is een featuree die ik best graag zou willen gebruiken

[ Voor 71% gewijzigd door BierPul op 14-05-2003 11:36 ]

[Bosmonster]

LOST_GUNT schreef op 14 May 2003 @ 11:34:
Uhhm Bold en Italic en Underline functioneren nog wel gewoon

Maar ik kan toch alle span definties weg replacen (ik dacht dat ik dat doorboven deed) dan heb ik toch een plain string eigenlijk .

Teniminste dat zou ik moeten hebben

Dan ben je toch alle bestaande styles in die string kwijt? Dan maak je iets een ander lettertype, daarna rood en dan ben je je lettertype weer kwijt

[ Voor 11% gewijzigd door Bosmonster op 14-05-2003 11:36 ]

[BierPul]

Dat vindt ik niet zo erg het gaat meer op een paragraaf stijl dus titels , vlakken tekst niet een woord of meerdere woorden zeg maar

[crisp]

LOST_GUNT schreef op 14 May 2003 @ 11:34:
Uhmm ik snap wat je bedoelt als je text halverwegen een span selecteerd neemt ie de span class niet mee en kan die ook niks replacen

Is er geen andere mannier om dit te fixen want het is een featuree die ik best graag zou willen gebruiken

als je alle span tags wilt verwijderen kan je gewoon dit doen:

JavaScript:

code = code.replace(/<\/?span[^>]*>/gi, '');

maar wat nou als dit je selectie is:

code:

hier heb ik alleen <span class="bold">een begintag in zitten, de eindtag valt buiten mijn selectie

wat dat betreft ben ik het met Bosmonster eens: doe het achteraf in 1 keer

[ Voor 10% gewijzigd door crisp op 14-05-2003 11:40 ]

[Bosmonster]

crisp schreef op 14 mei 2003 @ 11:39:
[...]

als je alle span tags wilt verwijderen kan je gewoon dit doen:

JavaScript:

code = code.replace(/<\/?span[^>]*>/gi, '');

maar wat nou als dit je selectie is:

code:

hier heb ik alleen <span class="bold">een begintag in zitten, de eindtag valt buiten mijn selectie

Daar zorgt als het goed is het MSHTML component voor, die geeft je dan autmaotisch een extra /span aan het einde en zorgt voor een kopie van de span in de achtergebleven tekst...

Of het helemaal goed werkt met custom html/css weet ik alleen dus niet

[BierPul]

Hmmm op zich werkt het nu wel aardig hoor, ik heb een string

daar wijs ik een class alineakop aan toe

Haalo ik ben een string

Als ik nu string selecteer en normale text meegeef gaat ie netjes mee en verander ie netjes terug, gooi ik dan opnieu alineakop erover heen is alles weer druk, als ik dan dezelfde aktie herhaal krijg ik de volgende output

Alleen die ophoping van ongebruikte class definities vindt ik niet zo netjes kan ik niet via regex alle span en /span wel weghalen waar geen info tussen zit ?

De dikgedrukte moeten dus weg.
<SPAN class=alineakop><SPAN class=alineakop>Hallo ik ben een <SPAN class=normaletext>string </SPAN></SPAN></SPAN>

Dit wil ik dan doen voordat ik alles in de database gooi

[ Voor 24% gewijzigd door BierPul op 14-05-2003 11:59 ]

[crisp]

Het mooist is imho om een stack-based tidier te maken die ook dubbele tags kan samenvoegen (ben ik zelf ook mee bezig )
met regexpen alleen is dat al bijna niet meer te doen...

[ Voor 20% gewijzigd door crisp op 14-05-2003 12:06 ]

[BierPul]

Als ik die overbodige troep maar kwijt ben vindt ik het best

[Bosmonster]

Wat we eerder al zeiden dan.. gewoon ALLE spans weghalen en toevoegen wat je wilde (een enkele span om de geselecteerde tekst).

[BierPul]

Ok maar dan ben ik echt alles kwijt wat binnen de div valt

Ik dacht dat ik met regex wel wat kon fixen

[Bosmonster]

LOST_GUNT schreef op 14 May 2003 @ 12:20:
Ok maar dan ben ik echt alles kwijt wat binnen de div valt

Ik dacht dat ik met regex wel wat kon fixen

Het probleem is wat crisp ook al zegt, je weet niet welke tag waar bij hoort en kunt dus ook niet zomaar onnodige tags verwijderen. Je zult als je dit wilt de hele content op moeten gaan delen en parsen, vandaar zijn opmerking over het stackbased parsen, want dat is waar je dan terecht komt

[BierPul]

OK , ik weet ff genoeg , ik denk dat ik het maar ff zo laat.

Het is wel niet netjes maar ik kan eventueel later de content nog cleanen het werkt in ieder geval