[CKEditor] CKEditor 3.5 : ajout de bouton pour encadrer ma sélection

Bonjour bonjour,

cela fait 2 jours que je me bats avec CKEditor 3.5 pour tenter de rajouter des boutons dans la barre d'outils, boutons qui doivent me permettre d'encadrer mon contenu par un tag du type [joueur:Zinedine Zidane] ou [equipe:Real Madrid].

Ce type de tag sera ensuite traité lors de l'enregistrement en base, mais on n'en est pas encore la, vu que je n'arrive pas à faire fonctionner mes boutons.

Jusqu'à maintenant, je suis parti sur 2 pistes différentes :

1. http://www.voofie.com/content/2/cked...n-development/
Et voilà ce que j'ai pondu à partir de ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CKEDITOR.plugins.add('sport_bouton_fichejoueur',
{
	init: function(editor)
	{
		var pluginName = 'sport_bouton_fichejoueur';
		editor.ui.addButton(pluginName,
		{
			label: 'Idalgo - Fiche Joueur',
			command: pluginName,
			icon: CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-joueur.png'
		});
		editor.addCommand(pluginName,
		{
			exec: sport_bouton_fichejoueur_onclick
		});
	}
});
 
function sport_bouton_fichejoueur_onclick(editor) {
	// Et là je bloque !!!
}

2. J'ai également regardé du coté du plugin de base basicstyles dont j'ai fait un copier coller afin de le personnaliser. Et voilà donc le contenu du fichier que j'ai réécrit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*
	Gros copier coller du fichier plugin.js du plugin "basicstyles"
*/
 
CKEDITOR.plugins.add( 'sport_boutons',
{
	requires : [ 'styles', 'button' ],
 
	init : function( editor )
	{
		// All buttons use the same code to register. So, to avoid
		// duplications, let's use this tool function.
		var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton, iconSrc )
		{
			var style = new CKEDITOR.style( styleDefiniton );
 
			editor.attachStyleStateChange( style, function( state )
				{
					editor.getCommand( commandName ).setState( state );
				});
 
			editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
 
			editor.ui.addButton( buttonName,
				{
					label : buttonLabel,
					command : commandName,
					icon : iconSrc
				});
		};
 
		var config = editor.config,
			pluginName = 'sport_boutons';
 
		addButtonCommand('Player'	, 'Idalgo - Joueur'	, 'idalgo_player_click'	, config.coreStyles_idalgo_player,	CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-joueur.png');
		addButtonCommand('Team'		, 'Idalgo - Equipe'	, 'idalgo_team_click'	, config.coreStyles_idalgo_team,	CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-equipe.png');
		// addButtonCommand('Widget'	, 'Idalgo - Widget'	, 'idalgo_widget_click'	, config.coreStyles_idalgo_widget,	CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-joueur.png');
		// addButtonCommand('Sound'	, 'Son'				, 'ftv_sound_click'		, config.coreStyles_ftv_sound,		CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-joueur.png');
		// addButtonCommand('Video'	, 'Vidéo'			, 'cappu_video_click'	, config.coreStyles_cappu_video,		CKEDITOR.plugins.getPath(pluginName) + 'images/icon-idalgo-joueur.png');
	}
});
 
// Basic Inline Styles.
 
/**
 * Définition du style d'un lien vers une fiche joueur
 */
CKEDITOR.config.coreStyles_idalgo_player = {
	element		: 'a',
	attributes	: {
		'href' :	'#',
		'class' :	'idalgo_player'
	}
};
 
/**
 * Définition du style d'un lien vers une fiche équipe
 */
CKEDITOR.config.coreStyles_idalgo_team = {
	element		: 'a',
	attributes	: {
		'href' :	'#',
		'class' :	'idalgo_team'
	}
};

Concernant la première solution, je coince pour le contenu de la fonction qui s'exécute au clic sur le bouton, je ne sais pas quoi faire dedans.

Et puis pour la deuxième, c'est simple, je n'arrive pas à la faire tourner, et même si elle tournait, elle me génèrerait des liens au lieu du token que je voudrais.

PS : je tiens à préciser que j'active ces plugins dans le fichier config.js, et que j'ajoute les boutons correspondants dans la toolbar en en créant une personnalisée. Voilà le contenu de mon config.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
 
CKEDITOR.editorConfig = function( config )
{
 
	// Define changes to default configuration here. For example:
	config.skin = 'kama';
	config.language = 'fr';
	config.uiColor = '#9999FF';
 
	config.toolbar = 'Sport';
	config.stylesCombo_stylesSet = 'sport_styles';
	config.extraPlugins = 'sport_boutons';
 
	config.toolbar_Sport = [
		['Source'],
//		['Save','NewPage','Preview', 'Print'],
//		['Templates'],
		['Cut','Copy','Paste','PasteText','PasteFromWord'],
		['SpellChecker', 'Scayt'],
		['Undo','Redo','-','Find','Replace'],
		['SelectAll','RemoveFormat'],
		['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
		['Maximize', 'ShowBlocks'],
		['About'],
//		['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
		'/',
		['Bold','Italic','Underline','Strike'],
		['Subscript','Superscript'],
		['NumberedList','BulletedList'],
		['Outdent','Indent','Blockquote','CreateDiv'],
//		['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//		['BidiLtr', 'BidiRtl'],
		['Link','Unlink','Anchor'],
		['Styles','Format'/*,'Font','FontSize'*/],
		['TextColor','BGColor'],
		// ['sport_bouton_fichejoueur']
		['Player', 'Team']
	];
 
};
 
CKEDITOR.addStylesSet( 'sport_styles',
[
    // Styles de bloc
	{ name : 'Réaction centré',		element : 'div',	attributes : { 'class' : 'reaction' } },
	{ name : 'Réaction à gauche',	element : 'div',	attributes : { 'class' : 'reaction left' } },
	{ name : 'Réaction à droite',	element : 'div',	attributes : { 'class' : 'reaction right' } },
 
	{ name : 'Encadré centré',		element : 'div',	attributes : { 'class' : 'encadre' } },
	{ name : 'Encadré à gauche',	element : 'div',	attributes : { 'class' : 'encadre left' } },
	{ name : 'Encadré à droite',	element : 'div',	attributes : { 'class' : 'encadre right' } },
 
	{ name : 'Sondage à gauche',	element : 'p',		attributes : { 'class' : 'sondage left' } },
	{ name : 'Sondage à droite',	element : 'p',		attributes : { 'class' : 'sondage right' } },
 
	{ name : 'Par. Lien PDF', 		element : 'p',		attributes : { 'class' : 'pdf-link' } },
 
	{ name : 'Widget à gauche', 	element : 'p',		attributes : { 'class' : 'idalgo widget left' } },
	{ name : 'Widget à droite', 	element : 'p',		attributes : { 'class' : 'idalgo widget right' } },
 
    // Styles en ligne
    { name : 'Fiche joueur', 		element : 'span', attributes : { 'class' : 'idalgo joueur' } }
]);

Merci d'avance pour les coups de main, et désolé si le problème parait bête, c'est la première fois que je mets les mains dans un editeur de texte en JS, et je rame !!!!