FCKeditor est un éditeur de texte très convivial pour écrire directement ces pages de site internet sans avoir à connaître le code HTML.

La version actuelle est la 2.6.2 !

Allez, zou…

Le site officiel http://fckeditor.net Pour la documentation, il y a le Wiki.

Il faut dézipper le package, et là, on a une arborescence de fichiers assez complexe!

Pour le moment, tout laisser en état, on fera le ménage après…

Tous les répertoires commençant par un '_' ne sont pas indispensables.

Parmi eux, il y a les _samples, qui sont très utiles pour voir quelques exemples pratiques!

Le code pour insérer l'éditeur visuel est assez simple:

	<script type="text/javascript" src="/go/wp-content/plugins/miwa-edit/fckeditor/fckeditor.js"></script>
		<script type="text/javascript">
 
// oFCKeditor.BasePath = '/fckeditor/' ;	// '/fckeditor/' is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('index.php')) + 'fckeditor/' ;
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath	= sBasePath ;
oFCKeditor.Config['FullPage'] = true ;
oFCKeditor.Value = document.getElementById('miwatext').value;
oFCKeditor.Create() ;
		</script>

http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Configurations_Settings#ProtectedSource

http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Toolbar

Il faut modifier le fichier de configuration /fckeditor/fckconfig.js

Par défaut, il y a 2 jeux de boutons définis “Default” et “Basic”:

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

Pour avoir sa propre barre d'outils, il faut procéder en 2 étapes:

Il suffit de rajouter sa propre barre de menu:

FCKConfig.ToolbarSets["MyToolbar"] = [
        ['Cut','Copy','Paste','PasteText','PasteWord'],
        ['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
        '/',
        ['OrderedList','UnorderedList','-','Outdent','Indent'],
        ['Link','Unlink','Anchor'],
        '/',
        ['Style'],
        ['Table','Image','Flash','Rule','SpecialChar'],
        ['About']
] ;

Puis de charger cette barre d'outils à la création:

<script type="text/javascript">
        var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
        oFCKeditor.ToolbarSet = 'MyToolbar' ;
        oFCKeditor.Create() ;
</script>

Pour ne pas avoir à toucher au fichier fckconfig.js, il est possible de mettre les paramètres dans un fichier à part et de l'indiquer à FCKeditor avec cette instruction:

oFCKeditor.Config["CustomConfigurationsPath"] = "/js/myconfig.js";

Certaines configurations simples peuvent être données directement avec

oFCKeditor.Config["BLABLA"]="BLIBLI";

Par exemple:

<script type="text/javascript">
        var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
        oFCKeditor.Config["CustomConfigurationsPath"] = "/js/myconfig.js";
        oFCKeditor.ToolbarSet = 'MyToolbar' ;
        oFCKeditor.Config['FullPage']=true;
        oFCKeditor.Create() ;
</script>

et dans le fichier js/myconfig.js

FCKConfig.ToolbarSets["MyToolbar"] = [
	['Bold','Italic','Underline','StrikeThrough'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['FontFormat','-','OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','-','Subscript','Superscript'],
	['TextColor','BGColor'],
	'/',
	['Link','Unlink','Anchor'],
	['Image','Table','Rule','SpecialChar','PageBreak'],
	['Style','FontName','FontSize'],
	'/',
	['FitWindow','-','Save','-','Source','-','Preview'],
	['Undo','Redo','-','SelectAll'],
	['Cut','Copy','Paste','PasteText','PasteWord',],
	['ShowBlocks','-','DocProps',]		
	// No comma for the last row.
] ;

http://wiki.fckeditor.net/Developer%27s_Guide/Integration/Javascript#Height

Pour donner une hauteur ou une largeur personnalisée à l'éditeur:

oFCKeditor.Height = 400 ; // 400 pixels

oFCKeditor.Height = "400" ; // 400 pixels

oFCKeditor.Height = "80%" ; // 80 %

oFCKeditor.Width= 400 ; // 400 pixels

oFCKeditor.Width= "400" ; // 400 pixels

oFCKeditor.Width= "80%" ; // 80 %

Pour aller toujours plus loin…

ProtectedSource

ProtectedTags

FCKConfig.ProtectedSource
 
// The following instructs FCKeditor to accept the tags <MYTAG> and <CUSTOM>.
FCKConfig.ProtectedTags = 'MYTAG|CUSTOM' ;

http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Configurations_Settings

Pour personnaliser les styles disponibles dans la barre d'outils:

http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Styles

Vous pouvez préparer des modèles de page HTML et offrir le choix dans la barre d'outils:

http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Templates

Configuration pour utiliser un fichier XML particulier:

FCKConfig.TemplatesXmlPath = '/mytemplates.xml' ;

Ce fichier doit être de la forme:

<?xml version="1.0" encoding="utf-8" ?>
<Templates imagesBasePath="/images/templates/">
  <Template title="My Template 1" image="template1.gif">
    <Description>Description of my template 1.</Description>
    <Html>
      <![CDATA[
        <b>Template 1 HTML</b>
      ]]>
    </Html>
  </Template>
  <Template title="My Template 2">
    <Html>
      <![CDATA[
        <b>Template 2 HTML</b>
      ]]>
    </Html>
  </Template>
</Templates>

Quelques liens intéressants du wiki: http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API

Pour obtenir la variable objet de l'éditeur:

var oEditor = FCKeditorAPI.GetInstance('LeNomDeCreation') ;

Et puis, on peut alors accéder aux propriétés et méthodes:

Properties:
 * Name = (string) The instance name.
 * Status = (integer) The editor status (loading status).
 * EditorDocument = (object) The DOM Document object for the editing area.
 * EditorWindow = (object) The DOM Window object for the editing area.
Methods:
 * AttachToOnSelectionChange( functionPointer )
 * Focus()
 * GetXHTML( formatted )
 * InsertElement(element)
 * InsertElementAndGetIt(e)
 * InsertHtml(html)  // Inserts HTML in the current cursor position
 * IsDirty()  // Checks if the content in the editor has been changed
 * MakeEditable()
 * ResetIsDirty()  // Resets the dirty state
 * SetHTML( html )  // Sets the contents of the editor
     // Note that when using this method, you will loose any listener that you
     // may have previously registered on the editor.EditorDocument.
 * GetHTML() // retrieves the edited html from the editor.
 * SwitchEditMode()
 * UpdateLinkedField()

Pour lancer des actions de la toolbar à partir d'autres scripts ou boutons perso:

oEditor.Commands.GetCommand(commandName).Execute();

Par exemple:

On ajoute un bouton HTML pour déclencher l'action 'FitWindow' (mode 'fullscreen').

<script type="text/javascript">
function miwa_FS () {
oEditor = FCKeditorAPI.GetInstance('FCKeditor1')
oEditor.Commands.GetCommand('FitWindow').Execute();
}
</script>
<div class="action" onclick="miwa_FS();">fullscreen</div>

page wiki en anglais

Pour définir les styles dans la barre d'outils, on utilise un fichier XML: http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Styles

traduction pour l'api en français

Il y a des exemples fournis pour coupler l'éditeur avec un script PHP:

<?php
$sValue = stripslashes( $_POST['FCKeditor1'] ) ;
echo $sValue;
?>