Installation d'un éditeur de texte CKeditor
Publié le 14/07/2014 :
Un éditeur de texte est un formulaire qui vous permet de créer et mettre à jour le contenu de votre site Internet. L’éditeur de texte permet de donner des caractéristiques et mettre en forme les textes à publier sur le site (couleur du texte, taille des titres et sous titres, type de police, surlignement, mise en page …). Cet éditeur agit comme un logiciel de traitement de texte. Il permet de mettre en forme le texte sans se soucier des codes HTML à modifier. Le résultat de la mise en forme du texte présent dans l’éditeur montre un aperçu tel qu’il est publié sur le site. Au cours de ce tutoriel nous allons voir comment installer et configurer CKeditor, afin de l’intégrer dans des pages en back office sur votre site Internet. CKeditor est un éditeur de texte WYSIWYG pour créer du contenu et donner une présentation optimale à vos pages web. CKeditor est l’un des éditeurs les plus utilisé par les webmasters. D’autant plus, il est utilisé par les CMS Drupal et Joomla. Vous trouverez ici la démonstration de l’éditeur de texte. Tout d’abord téléchargeons le fichier compressé de l’éditeur. Selon l’utilisation plus ou moins avancé de cet éditeur vous avez le choix entre les 3 principaux types d’éditeur :
- Le basique
- Le standard
- Le paquetage avec une bonne partie des options.
Sélectionner un des 3 types d’éditeurs, et cliquer sur le bouton rouge “Download CKEditor” pour télécharger le fichier compressé. Dé zippez ce fichier et copiez le contenu de l’archive dans un répertoire nommé CKEditor. Téléchargez le dossier à la racine de votre site (ou dans un dossier js se trouvant à la racine du site) grâce à votre client FTP (Filezilla par exemple). Sur les pages du back office contenant un formulaire de texte multi ligne, veuillez mettre les codes JavaScript (représentés en rouge) dans la balise “Head” :
<head>
<meta charset="utf-8" >
<title>Titre sur le navigateur</title>
<link rel=”stylesheet“ type=”text/css“ href=”/css/style.css" />
<script src="/js/jquery-1.9.1.min.js“></script>
<script src="/js/ckeditor/ckeditor.js"></script>
</head >
Remarques : CKEditor a besoin de la bibliothèque JQuery pour fonctionner correctement. Dans notre cas, le dossier CKEditor contenant le fichier JavaScript ckeditor.js est dans le dossier js, ce dernier est situé à la racine du site.
Toujours sur la page à modifier contenant la zone de texte multi ligne. Mettre les codes JavaScript suivant :
<script>
var editor = CKEDITOR.replace('detail’);
</script>
Le script présenté ci-dessus permet d’initialiser l’éditeur de texte lors du chargement de la page web du back office. Prêtons notre attention sur la fonction “replace”. L’argument de replace représente le nom de la zone de texte multi ligne qui recevra les bandeaux de l’éditeur de texte CKEditor. Cette zone de texte a pour nom “détail”. L‘éditeur de texte est maintenant installé. Ce script est mis après le formulaire de saisie (après balise form fermée)
Configuration de l’éditeur de texte
Dans ce paragraphe nous allons voir comment personnaliser cet éditeur de texte en lui affectant le style site utilisé. Après avoir installé votre éditeur de texte sur les pages concernées. Le texte créé ou présent dans l’éditeur ne possède pas exactement le même style que sur le site. Par exemple les titres créés (avec les balises H1, H2 ….) dans l’éditeur ont une couleur ou une taille différente par rapport aux titres présents sur le site. Nous allons voir comment obtenir les styles de titres de l’éditeur identiques aux styles appliqués sur votre site. Autrement dit, comment appliquer la charte graphique de votre site sur l’éditeur de texte ?
Voici le script à mettre dans vos pages de modification de textes, il remplace le script précédemment cité :
<script>
var editor = CKEDITOR.replace('detail',{
contentsCss : "/css/style.css”
});
</script>
Ce script configure l’éditeur de texte en lui fournissant les informations de la feuille de style utilisée par votre site Internet. Ainsi, l’éditeur de texte reçoit la charte graphique du site. Il est à présent possible d’avoir par exemple des titres et sous-titre de même propriété (taille, couleur du texte, type de police, mise en page ….) qu’il y a sur le site. Ainsi on peut modifier du texte et voir les modifications directement sur le texte tel qui serai affiché sur le site en tant qu’internaute. Le script pointe sur un fichier de feuille de style se trouvant quelque part dans un des répertoires sur le serveur web. Dans notre exemple, le fichier (la feuille de style) se trouve dans le dossier /css/. Ce fichier a pour nom : style.css.
Il est possible d’ajouter ce que l’on appel des modules à votre éditeur de texte CKEditor. Ceci consiste à ajouter des fonctionnalités à votre éditeur de texte. On peut par exemple ajouter un compteur de mot, une fonctionnalité permettant de modifier la largeur des tableaux, permettre à l’éditeur de texte de d’adapter sa hauteur en fonction du nombre de lignes du texte qui le contient. La démarche reste la même, on télécharge le fichier représentant le module souhaité à ajouter. On le décompresse pour mettre dans un dossier portant le nom du module. Le module de CKEditor est appelé le plugin. Ce dossier est mis dans le répertoire parent : c’est à dire /js/ckeditor/plugin/ dans notre cas. Ainsi le plugin installé, par exemple, le compteur de mot nommé wordcount est situé sur /js/ckeditor/plugin/wordcount. Dans le fichier config.js du CKEditor on doit indiquer le nom du plugin utilisé par l’éditeur de texte, pour cela on indique la ligne suivant dans ce fichier (si elle n’existe pas encore) :
config.extraPlugins = ‘<nom du plugin>,<autre nom du plugin>‘;
On a config.extraPlugins = ‘wordcount‘; dans notre exemple.
Modifié le 14/07/2014
