Discussion :

[juju.92]

Bonjour,
J'ai écumé pas mal de forum afin de trouver une réponse à mon problème mais c'est sans succès.
Dans tinymce les boutons d'alignement du text (gauche, centre et droite) retourne un code comme ceci :

Code html :

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

<p style="text-align : center">mon contenu</p>

Or j'aimerais retourner ceci :

Code html :

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

<p class="textCenter">Mon contenu</p>

J'arrive à récupérer mon contenu sélectionner en cliquant sur le bouton justifyleft par exemple en faisant ceci :

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
23
 
setup: function(ed){
		ed.addButton('bold',{
		title	: 'gras',
	});
	ed.addButton('underline',{
		title	: 'souligner',
	});
	ed.addButton('strikethrough',{
		title	: 'barré',
	});
 
	ed.addButton('justifyleft',{
		title	: 'Aligner à gauche',
		onclick: function(){
            var selection = tinyMCE.activeEditor.selection.getContent();
            if(selection != ''){
            	alert(selection);
            }
        }
 
	})
}

Mais ensuite je ne sais pas comment retourner mon contenu avec la class désiré, j'ai passé beaucoup de temps à chercher mais sans succes ...

Pouvez-vous me donner un coup de main ?

[NoSmoking]

Bonjour,

Dans tinymce les boutons d'alignement du text (gauche, centre et droite) retourne un code comme ceci :...

tu peux personnaliser les styles que tu souhaites appliquer.

Code :

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

1
2
3
4
5
formats: {
    ....
    alignleft:   {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'textLeft'},
    aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'txtCenter'},
    ...

http://www.tinymce.com/wiki.php/Conf...:style_formats

[juju.92]

Oui oui je sais je l'ai est utilisé pour mes styles comme ceci :

Code :

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

1
2
 
theme_advanced_styles : "Aligner à gauche=textLeft;Centrer=textCenter;Aligner à droite=textRight;Bouton=bouton",

Ca marche mais je prefere reserver les styles pour des couleurs ou autre ...
Les alignement de texte étant deja gérer par les 3 boutons déja cités plus haut.
Pour une raison inconnu quand j'enregistre mon article les style rentrée directement dans les balises ne sont pas enregistrer, c'est pour cela que j'essaye de modifier le comportement de ces boutons en passant par une classe.
Et puis je trouve ça plus propre ...

J'ai avancé un peu :

Code :

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

1
2
3
4
5
6
7
8
 
ed.addButton('justifyleft',{
title   : 'Aligner à gauche',
onclick: function(){
    var blocSelect = tinyMCE.activeEditor.selection.getNode().nodeName;
    tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select(blocSelect)[0], 'myclass');
}
});

Le problème est que je n'arrive pas a selectionner le <p> que j'ai selectionner en appuyant sur mon boutons.
Si je mets :

Code :

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

tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select(blocSelect)[0], 'myclass');

Je recupere le premier <p> dans mon dom et si je mets :

Code :

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

tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select(blocSelect), 'myclass');

Alors ma classe sera appliqué a tous les <p>, coment faire pour appliquer ma classe que à l'élément selectionné ?

[NoSmoking]

var blocSelect = tinyMCE.activeEditor.selection.getNode().nodeName;

pourquoi récupérer le nom de la balise et pas le noeud directement ?

Code :

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

1
2
var nodeSelect = editor.selection.getNode();//.nodeName;
editor.dom.addClass(nodeSelect, 'myclass');