How to: Créer un plugin fckeditor

4 Tim Tutorials Jeudi 23 juillet 2009, 14:00

Dans le monde du développement web, il y a un domaine où je n’ai pas encore trouvé une recette miracle: La publication de contenu avec un éditeur WYSIWYG. En même temps, la problématique est costaud, faire éditer du HTML à des gens qui ont déjà du mal avec Word, sans qu’ils sachent qu’ils éditent du HTML.

Après avoir définitivement abandonné TinyMCE, car trop usine à gaz et n’en faisant qu’à sa tête, j’ai essayé nicedit comme je vous l’avais signalé dans un bon plan de la semaine. Malheureusement, il reste un peu juste pour certains besoins.
Sur les conseils de Sam, je me suis donc relancé dans une vieille connaissance, FCKEditor, un des plus vieux RTE avec TinyMCE.

S’il est a noté de nets progrès, il fait encore un peu usine à gaz (mais moins que TinyMCE quand même) et je le trouve particulièrement moche, mais c’est un détail qui peut se modifier, donc on va le mettre de côté pour l’instant ;)

Un des impératifs par contre, c’est la personnalisation et donc la création de plugin permettant de rajouter des boutons avec des fonctionnalités que l’on aura déterminer nous même. Et vu les difficultés que j’ai pu rencontrer pour créer mon premier, je me suis dis que ca valait bien quelques explications. Dans un souci de clarté, je ne détaillerai pas l’installation de fck, je vous invite à faire un tour sur leur site pour ça.

Première chose quand on veut créer un plugin fck, créer son arborescence, dans editor/plugins. Ici, on va créer un plugin qui nous permettra de rajouter un bouton à notre toolbar qui lancera une fenêtre nous permettant de faire un peu ce qu’on veut, en l’occurrence dans notre cas, afficher une liste des pages de notre gestionnaire de contenus symfony afin de pouvoir insérer des liens internes entre elle.

Dans notre nouveau dossier, vous créez donc un fichier plugin.js avec à l’intérieur:

// Ici je crée une action FCK qui s'appelle Internlink, et qui chargera le fichier test.html (qui sera au même niveau que ce fichier) lors de son appel
FCKCommands.RegisterCommand('Internlink', new FCKDialogCommand('Internlink','Ajout lien interne',FCKConfig.PluginsPath+'internlink/test.html', 300, 300 ));
 
// Ici je crée un bouton pour la toolbar auquel j'associe l'action précédemment définie
FCKToolbarItems.RegisterItem( 'Internlink', new FCKToolbarButton( 'Internlink', 'Lien interne', null, FCK_TOOLBARITEM_ICONTEXT, true, true, 1 ) ) ;

Ensuite on enchaine avec le template de notre popup qu’on a appelé test.html plus haut (on le met bien où on veut mais j’ai définis au-dessus de le mettre au même niveau):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    // Cette partie est nécessaire pour pouvoir utiliser les fonctions de fck à l'intérieur de notre popup 
    var oEditor = window.parent.InnerDialogLoaded();
    var FCKConfig = oEditor.FCKConfig;
    var dialog = window.parent;
    document.write('<script src="' + FCKConfig.BasePath + 'dialog/common/fck_dialog_common.js" type="text/javascript"><\/script>');
    dialog.SetOkButton(true); // Par défaut, seul le bouton annuler est affiché, on rajoute le bouton ok	
 
    // Maintenant on fait bien ce qu'on veux, ici j'ai décidé de récupérer en AJAX, une liste en JSON de toutes mes pages et d'alimenter ma selectbox avec
    jQuery(document).ready(function(){
      $.getJSON("/content/selectJson",{}, function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) {
          options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        $("select#intern-link").html(options);
      })
    });
 
    // Puis on surdéfinit une fonction Ok qui est appelé par fck quand on appuye sur le bouton ... ok
    function Ok()
    {
      // Maintenant on utilise fck pour rajouter du contenu à notre RTE. Ici je rajoute simplement les valeurs de mes 2 champs définis dans mon HTML ci-dessous
      oEditor.FCK.InsertHtml( '<a href="'+ jQuery('#intern-link').val() +'" class="extern">'+ jQuery('#intern-label').val() +'</a>' );
      return true; // Il faut renvoyer true pour fermer la popup
    }
</script>
</head>
<body>
	<div id="add-intern-link">		
		<p>
			<label for="intern-link">Lien interne</label>
			<select id="intern-link" name="intern-link">
			</select>						
		</p>
		<p>
			<label for="intern-label">Label</label>
			<input type="text" id="intern-label" name="intern-label" />						
		</p>
	</div>
</body>
</html>

Il ne reste plus qu’à charger notre plugin dans notre conf:

FCKConfig.Plugins.Add( 'internlink' ) ;

et ajouter le bouton à notre toolbar comme par exemple:

FCKConfig.ToolbarSets["nice"] = ['Internlink'];

et on obtient:

On a maintenant accès à toutes nos pages, et un clic sur ok, nous rajoutera un lien dans notre contenu avec le label renseigné.

Il ne reste plus qu’à adapter à vos besoins ces petits bouts de codes!

Tags: AJAX, fckeditor, javascript, jquery, plugin

4 Réponses

rouki 12 octobre 2009 à 18 h 08 min #

Merci pour le tuto, il m’a bien servi
Zai 1 novembre 2009 à 1 h 31 min #

Merci également pour le tuto.
dom 1 novembre 2009 à 15 h 18 min #

ha … je viens de tester le successeur de FCKeditor.. donc le CKEditor. il s’intere super bien a l’admin generator de symfony, install super easy (cf http://blog.servergrove.com/2009/10/07/using-ckeditor-in-symfony-12-admin-generator/ )
dom 1 novembre 2009 à 15 h 19 min #

..en plus CKEditor… est plus jolie

Laisser un message

Cliquer ici pour annuler la réponse.