L'attribut config indique le nom d'une configuration d'un éditeur. Sa valeur par défaut est default.

Les configurations sont déclarées dans la section [htmleditors] de la configuration générale de jelix. Voici ce qu'elle contient par défaut :

[htmleditors]
default.engine.name = wymeditor
default.engine.file[] = jelix/jquery/jquery.js
default.engine.file[] = jelix/wymeditor/jquery.wymeditor.js
default.config = jelix/js/jforms/htmleditors/wymeditor_default.js
default.skin.default  = jelix/wymeditor/skins/default/screen.css

Pour mieux comprendre la structure :

ccc.engine.name = nnn
ccc.engine.file = 
ccc.config =
ccc.skin.sss =

• ccc représente le nom de la configuration
• nnn représente le nom du moteur utilisé
• sss représente l'identifiant d'une 'skin'
• ccc.engine.file contient le lien du fichier du moteur
• ccc.config contient le lien de fichier de configuration (voir plus bas)
• ccc.skin contient le lien de fichier css

Ces liens sont les fichiers javascript ou css à charger pour que l'éditeur fonctionne. Le chemin doit être relatif au chemin de base de l'application (relatif au basePath donc).

Pour le moteur (ccc.engine.file), vous pouvez spécifier plusieurs fichiers javascript. Il faut alors mettre plusieurs lignes avec le nom se terminant par [], comme dans l'exemple du dessus avec wymeditor.

Bien sûr, vous pouvez avoir plusieurs configurations :

[htmleditors]
default.engine.name = wymeditor
default.engine.file[] = jelix/jquery/jquery.js
default.engine.file[] = jelix/wymeditor/jquery.wymeditor.js
default.config = jelix/js/jforms/htmleditors/wymeditor_default.js
default.skin.default = jelix/wymeditor/skins/default/screen.css
default.skin.blue = jelix/wymeditor/skins/default/blue.css

simple.engine.name = wymeditor
simple.engine.file[] = jelix/jquery/jquery.js
simple.engine.file[] = jelix/wymeditor/jquery.wymeditor.js
simple.config = js/wymeditor_simple.js
simple.skin.default = jelix/wymeditor/skins/default/screen.css
simple.skin.blue = jelix/wymeditor/skins/default/blue.css

full.engine.name = tinymce
full.engine.file = tinymce/tinymce.js
full.config = js/tinymce_full.js
full.skin.default = tinymce/skins/default/full.css
full.skin.blue = tinymce/skins/default/blue.css

Il y a ici trois configurations disponibles, "default", "simple" et "full". Et il y a deux skins disponibles : "default", "blue".

Si vous voulez utiliser la config full avec la skin blue :

  <htmleditor ref="description" config="full" skin="blue">
	<label>Description du produit</label>
  </htmleditor>

La plupart des éditeurs HTML wysiwyg permettent de les configurer au moyen de paramètres divers et variés. Cette configuration se fait donc en javascript.

Pour déclarer une configuration précise auprès de jForms, il faut créer une fonction javascript qui se chargera alors de paramétrer l'éditeur selon vos besoins. Cette fonction doit se trouver dans un fichier, dont vous indiquez le chemin dans la configuration de jelix, comme on a vu plus haut.

Par exemple, on veut créer une nouvelle configuration "full" pour wymeditor. On crée par exemple un fichier dans www/js/wymeditor_full.js (l'endroit et le nom du fichier n'a aucune importance). Ensuite on le déclare dans la configuration :

[htmleditors]
full.engine.name = wymeditor
full.engine.file[] = jelix/jquery/jquery.js
full.engine.file[] = jelix/wymeditor/jquery.wymeditor.js
full.config = js/wymeditor_full.js 
full.skin.default = jelix/wymeditor/skins/default/screen.css

La fonction dans ce fichier doit se nommer d'une manière précise : jelix_eee_ccc(), où eee est l'identifiant de l'éditeur, qui est inscrit dans *.engine.name, et ccc l'identifiant de la configuration. Donc pour notre exemple, le nom doit être jelix_wymeditor_full(). Cette fonction reçoit en paramètre l'id du textarea qui contient le contenu HTML, l'id du formulaire, le nom de la skin et un objet de configuration (dans la version 1.1 de jelix, cet objet n'existait pas, et seul le code langue était passé directement).

Cet objet de configuration contient les propriétés suivantes

• locale : le code de langue (valeur de jApp::config()->locale)
• basePath : le basePath de l'application
• jqueryPath : le chemin URL vers le répertoire de jquery
• jelixWWWPath : le chemin URL vers le répertoire de jelix-www

Exemple de cette fonction, qui ajoute ici une feuille de style spécifique pour le contenu à éditer (à ne pas confondre avec la skin) :

function jelix_wymeditor_full(textarea_id, form_id, skin, config){
   jQuery(function(){
        jQuery("#"+textarea_id).wymeditor({
            updateSelector:    "#"+form_id,
            updateEvent:       "jFormsUpdateFields"
            stylesheet: '/css/stylesEditor.css'
           })
        }
)}

Notez bien que pour les fonctions de configuration de wymeditor, dans le cadre de Jelix, il faut absolument redéfinir les options updateSelector et updateEvent, comme indiqué ci-dessus.

Pour plus de renseignements sur la configuration de wymeditor, voir la page relative au projet : http://trac.wymeditor.org/trac/wiki/0.5/(..)

Déclarer les fichiers javascript à charger dans la configuration de Jelix et un fichier de configuration. Voici des exemples pour des éditeurs connus. Attention aux noms de fichiers des éditeurs en question, ils peuvent être différents.

CKEditor 3.x ¶

[htmleditors]
ckmyconf.engine.name = ckeditor
ckmyconf.engine.file[] = jelix/ckeditor/ckeditor.js
ckmyconf.config = js/ckeditor_myconf.js

function jelix_ckeditor_ckmyconf(textarea_id, form_id, skin, config) {
    var conf = {toolbar:[ /* ici votre configuration de toolbar */],
       /*autrepropriete:valeur,*/
     };
    if (skin !='default')
        conf['skin'] = skin;
    conf["language"] = config.locale.substr(0,2).toLowerCase();
    CKEDITOR.replace(textarea_id, conf);
}

TinyMCE ¶

[htmleditors]
default.engine.name = tinymce
default.engine.file = tinymce/tinymce.js
default.config = js/tinymce_default.js
default.skin.default =  tinymce/skins/default/full.css