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:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea {
    [blabla]
}
Doit pouvoir se transformer en:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
font-family:#visual-creator  Tahoma,#visual-creator Verdana,#visual-creator Arial,sans-serif;
Et si je fais ça:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
#visual-creator input[type="text"], input[type="email"], input[type="password"], input[type="url"],#visual-creator  textarea {