Bonjour à tous et à toute,
Le contexte:
Je suis en ce moment en train de coder un éditeur HTML visuel, comme le fait l'excellent Visual Composer (plugin wordpress).
Pour arriver à un résultat similaire entre mon backoffice, et mon frontoffice, je souhaiterai appliquer le style css de mon frontoffice dans la div englobante de mon plugin.
Problématique: si j'applique le style css de mon front office, celui ci ne se limite évidement pas à ma div container, et viens péter un peu tout le style de mon backoffice.
La solution la plus simple pour ce problème serait d'utiliser une iframe et d'y balancer mon css et moncontenu... mais, premièrement c'est plutôt crado, et deuxièmement, j'ai déjà beaucoup avancer mon plugin, et j'aimerai éviter d'avoir à adapter tout mon code pour qu'il fonctionne entre une iframe et sont parent: comme vous le savez, l'interpolation entre ces deux éléments sont plutôt pénible.
Du coup j'ai penser à une autre solution: réécrire mon style.css à la volé, en préfixant tout mes nodes, id et class par l'id de ma div container.
J'ai donc commencer à faire ce petit script:
1 2 3 4 5 6 7 8 9 10 11
|
$.ajax({
url:'style.css',
success:function(reply)
{
$style = reply;
$style = $style.replace(/([a-zA-Z0-9-_#\.=\[\] \"\']+)\s?{/g,"#visual-creator $1{");
console.log($style);
}
}); |
Et, par exemple, cela fonctionne très bien pour transformer "h2 { text-align:center }" en "#visual-creator h2 { text-align:center }"
Cependant, pour les règles un peu plus complexes (les règles multiples principalement) je n'y arrive pas :/
Par exemple:
1 2 3
| input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea {
[blabla]
} |
Doit pouvoir se transformer en:
1 2 3
| #visual-creator input[type="text"], #visual-creator input[type="email"], #visual-creator input[type="password"], #visual-creator input[type="url"], #visual-creator textarea {
[blabla]
} |
Mais là... je ne sais pas comment m'y prendre :/
Quelqu'un aurait une idée ?
Merci beaucoup.
Edit:
Si je fais ça:
1 2
| $style = $style.replace(/([a-zA-Z0-9-_#\.=\[\] \"\']+)\s?,/g,"#visual-creator $1,");
$style = $style.replace(/([a-zA-Z0-9-_#\.=\[\] \"\']+)\s?{/g,"#visual-creator $1{"); |
Toutes mes règles sont bien préfixée, mais il me préfixe aussi mes font-familly:
font-family:#visual-creator Tahoma,#visual-creator Verdana,#visual-creator Arial,sans-serif;
Et si je fais ça:
1 2
| $style = $style.replace(/([a-zA-Z0-9-_#\.=\[\] \"\']+)\s?,(.*?){/g,"#visual-creator $1,$2{");
$style = $style.replace(/([a-zA-Z0-9-_#\.=\[\] \"\']+)\s?{/g,"#visual-creator $1{"); |
Dans ce cas, il ne me prefixe que la première et dernière:
#visual-creator input[type="text"], input[type="email"], input[type="password"], input[type="url"],#visual-creator textarea {
Partager