Discussion :

[Anymfah]

Bonjour,

Je développe en ce moment un thème wordpress, avec une partie admin où l'utilisateur peut modifier son scss (et sass.js le transforme en css pour le front etc...) jusque là aucun problème!

Ce que j'aimerai faire, c'est de pouvoir éditer mon css directement en frontend (donc un peu comme emmet live), mais sans avoir le textarea sur la même fenêtre (afin de pas être gêné et de pouvoir avoir notre éditeur de code sur une nouvelle fenêtre). Donc l'idée serait de générer en js l'ouverture d'une nouvelle fenêtre où il y aurait l'éditeur css, puis à chaque modification du textarea de cette nouvelle fenêtre, déclencher une fonction js sur la fenêtre principale qui permet d'actualiser un textarea caché (qui permet de sauvegarder une option wordpress qui stock la css) ainsi que d'actualiser la css actuelle. Désolé pour mes explications, j'avoue ne pas être très clair, voici un exemple en code :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wp_admin_bar">
  <div id="boutton">Ouvrir la fenêtre</div>
</div>
<textarea id="hiddencss" style="display:none"></textarea>
<script>
var w;
function newWindow() {
  w = window.open();
  var html = '<textarea id="editorcss"></textarea>';
  $(w.document.body).html(html);
}
$('#boutton').live('click', function() {
  newWindow();
});
//var csseditor = $(w.document.body).find('#editorcss');
//csseditor.change(function() {
//  $('#hiddencss').val(csseditor.val());
// });
</script>

J'ai fais avec une nouvelle fenêtre, mais en réalité, tant que ça ne vient pas gêner la visibilité de la page sur laquelle on travaille, je me fiche un peu de la façon de faire, voir même s'il faut créer un module pour chrome ou mozilla en dernier recours.. bien que je ne sache pas du tout faire.

Un grand merci pour vos réponse d'avance en tout cas. Bonne journée.

[Anymfah]

Bon je me réponds à moi-même mais finalement j'ai trouvé un moyen

Si jamais ça peut aider d'autres personnes dans le futur voici la manip :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
jQuery(document).ready(function( $ ){
 
var w;
function newWindow() {
	w = window.open();
	var html = $('#anym_editor').html();
	$(w.document.body).html(html);
	worker();
}
 
$('#wp-admin-bar-anym_css_admin_bar').live('click', function() {
	newWindow();
});
 
function worker() {
	$('textarea', w.document).change(function() {
		console.log($('textarea',w.document).val());
	});
}
 
});