Installation de FCKeditor 2.5.1

Téléchargez le fichier FCKeditor_2.5.1.zip

Dézippez le dossier fckeditor dans le dossier admin

    <Root> Racine du site

  • [admin]
    • [fckeditor]
      • [editor]
        • [css][/css]
          • fck_editorarea.css
        • [filemanager]
          • [connectors]
            • [php][/php]
              • config.php
      • fckconfig.js
      • fckstyles.xml
    • fck_page.php
    • fck_page2.php
  • [userfiles]
    • [file]
    • [flash]
    • [image]
    • [media]
  • index.php

Créez votre page d’édition (fck_page.php)
Enregistrez la dans le dossier admin et placez-y le code suivant :
On commence par inclure la page du fckeditor.

			< ?php 
			include("fckeditor/fckeditor.php");
			?>;

Ensuite, dans le corps (body) de la apage entre des balises de formulaire la suite :

			<form>
			< ?php
			$oFCKeditor = new FCKeditor('FCKeditor2'); // the POST name
			$oFCKeditor-&gt;BasePath = 'fckeditor/';      // the fckeditor directory
			$oFCKeditor-&gt;Value = 'Hello';
			$oFCKeditor-&gt;Create();
			?>
			</form>

La première ligne donne le nom du POST que l’on récupère lors de l’envoit du formulaire, ici c’est FCKeditor2 .
La ligne suivante correspond au chemin conduisant au dossier fckeditor.
Puis la valeur à traité, ici ‘Hello’. On remplacera ceci par une variable au besoin.
Et enfin l’appel à la fonction qui va créer l’éditeur.
On peut rajouter différentes options supplémentaires comme on le verra ci-après.

Le code complet

&lt;?php 
	include('fckeditor/fckeditor.php');
	$fckdatastring = 'Hello';
?&gt;
	&lt;html&gt;&lt;head&gt;&lt;title&gt;Fck page&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;FCK page&lt;/h1&gt;	
	&lt;form name='form1' method='post' action='fck_page2.php' &gt;
&lt;?php
$oFCKeditor = new FCKeditor('FCKeditor2'); 
$oFCKeditor-&gt;BasePath = 'fckeditor/'; 
$oFCKeditor-&gt;Width = '760';
$oFCKeditor-&gt;Height = '300';
$oFCKeditor-&gt;ToolbarSet = 'Default'; 
$oFCKeditor-&gt;Value = $fckdatastring;
$oFCKeditor-&gt;Create();
?&gt;
&lt;/form&gt;
&lt;/html&gt;

On a rajouté quelques détails pratiques :
La valeur est passée par une variable $fckdatastring.
La largeur (width) et hauteur (height) ont fait leur apparition.
Le choix de la barre d’outils (toolbarset) est aussi très intéréssant comme on va le voir plus bas. Ici la toolbarset est par défaut (default).

Configurez votre propre toolbar

Ouvrez le fichier fckeditor/fckconfig.js et trouvez les lignes suivantes :

FCKConfig.ToolbarSets["Default"] = [
		  ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], 
		  ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], 
		  ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
		  ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
		  '/',
		  ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
		  ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
		  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
		  ['Link','Unlink','Anchor'],
		  ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
		  '/',
		  ['Style','FontFormat','FontName','FontSize'],
		  ['TextColor','BGColor'],
		  ['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
		  ] ;

		  FCKConfig.ToolbarSets["Basic"] = [
		  ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
		  ] ;

Ces lignes correspondent à la barre d’outils par défaut et la barre basique. Copiez la barre par defaut en lui donnant un nouveau nom « Personal » et enlevez ce qui ne vous convient pas.

FCKConfig.ToolbarSets["Personal"] = [
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Table','Rule','Smiley','SpecialChar','PageBreak','Source'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']		// No comma for the last row.
] ;		  

il n'y a plus qu'à modifier le nom de la toolbarset dans la page <em>fck_page.php</em> 

<code>$oFCKeditor-&gt;ToolbarSet = 'Personal'; </code>

Intégrer ses propres balises CSS


Ouvrez le fichier <span class="path">fckeditor/editor/css/fck_editorarea.css</span>
        On y trouve la <span style="text-decoration: underline;">police par défaut</span> ainsi que les styles basiques, c'est à dire l'essentiel pour que la mise en page dans l'éditeur soit conforme à la version publiée.
Si vous souhaitez utiliser une feuille de style se trouvant ailleurs vous devez modifier le fichier de configuration : <span class="path">fckeditor/fckconfig.js </span>
      FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ; 	     // par exemple <code>
      FCKConfig.EditorAreaCSS = '../styles/mystyles.css'; </code>

<Style name= »Image on Left » element= »img »> <Attribute name= »style » value= »padding: 5px; margin-right: 5px » /> <Attribute name= »border » value= »2″ /> <Attribute name= »align » value= »left » /> </Style>Quand au fichier fckeditor/fckstyles.xml.

Comparer-le au menu déroulant des styles de l'éditeur : hé bien c'est la même chose (mise à part "Red title"). Le menu déroulant est généré à partir de cet XML.

Le principe est donc simple : dans l'arbre des "Styles" on créé des enfants "Style"

  • Styles
    • Style (name, Element, Attribute, style)

Exemple :

<Style name="Emphasis" element="em" />

Fait apparaître « Emphasis » dans le menu déroulant et applique la balise « em » dans le code de l’éditeur. <em></em>

<Style name="Marker: Yellow" element="span">
<Style name="background-color" value="Yellow" />
</Style>

Ici c’est « Marker: Yellow » qui apparaîtra dans le menu déroulant et c’est un span qui sera placer dans le code avec l’attribut « style » ayant la propriété » background-color » possédant la valeur « Yellow »: <span style= »background-color: Yellow; »></span>

Exemple : je veux ceci -> <span class= »pink »></span>

&lt;Style name="Texte rose" element="span"&gt;
&lt;Attribute name="class" value="pink" /&gt;
&lt;/Style&gt;

	// Dans ma feuille de style fck_editorarea.css j'ajoute ceci :
	.pink {color:#FF0060; font-weight:bold; text-decoration:none;}

Pour les objets c’est le même principe sauf que les styles seront directement dans la page. Ci-dessous on lira « Image on Left » dans le menu déroulant , ce style n’apparaîtra que lorsqu’une image est sélectionné (element= ‘img’) et il lui ajoutera les attributs « style », « border » et « align » directement dans la balise :

<img src=’monimage.png’ style= »padding: 5px; margin-right: 5px » border= »2″ align= »left » />

Dernier rappel : SOYEZ PRECIS AVEC UN XML, un espace manquant, un guillemets non fermé, etc .. et plus rien de fonctionne.

Mais où est donc ce foutu « Red Title » qui refuse de partir du menu déroulant ?

Ouvez le fichier fckeditor/fckconfig.js et cherchez ces lignes :

FCKConfig.CustomStyles = 
{
     'Red Title'	: { Element : 'h3', Styles : { 'color' : 'Red' } }
};

Gérer les images et les fichiers

Les liens sont gérer par la même interface que les images ou les fichiers.

Ouvrez le fichier fckeditor/editor/filemanager/connectors/php/config.php

Trouver le code ci-dessous et placer la variable à « true » au lieu de « false ».

 

 

<code>$Config['Enabled'] = true ;</code>

A présent vous devez désigner le dossier dans lequel vous souhaitez placer vos images et fichiers divers. Par défaut il sera créer un dossier "<strong>userfiles</strong>" contenant quatre autres dossiers : "file", "flash", "image" et "media".  : 

<code>// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/userfiles/' ;
// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Useful if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = ' ' ;  </code>

Dabord le chemin relatif vers ce dossier à partir de la racine de votre site, dans notre exemple on choisit le nom de dossier "/upload/".

Puis le chemin physique ('/var/www/monsite/upload/' sous Linux ou 'C:\\xamp\htdocs\monsite\upload' sous Windows). Si vous ne connaissez pas le chemin physique utilisez realpath*.

Petite précision concernant les problèmes relatifs à certaines configurations :

Il est parfois
nécessaire de supprimer le slash devant le chemin relatif et d’ajouter un slash à la fin du chemin absolu (en local sous Windows).

		$Config['UserFilesPath'] = 'upload/' ;
		$Config['UserFilesAbsolutePath'] = 'D:\xampp\htdocs\monsite\upload/' ;

De façon à ce que les images soit visibles dans l’éditeur WYSIWYG on doit renseigner le chemin de base pour les liens dans le fichier de configuration : fckeditor/fckconfig.js

FCKConfig.BaseHref = 'http://127.0.0.1/monsite/';      // en local 
...
FCKConfig.BaseHref = 'http://www.monsite.com/';    // en ligne

Notes :

  • * realpath renvoit le chemin physique du serveur. Ecrivez ce code <?php echo realpath(.);?> dans une page que vous placerez dans le dossier dont vous cherchez le chemin.Il est conseillé de ne pas laisser trainer cette page sur le serveur…

Ressources :