Raccourcis : Contenu - rubriques - sous rubriques
EN FR

Pour utiliser un éditeur HTML wysiwyg dans vos formulaires, il faut utiliser la balise <htmleditor>.


  <htmleditor ref="description">
	<label>Description du produit</label>
  </htmleditor>

Vous pouvez changer l'apparence de l'éditeur, la configuration de l'éditeur, et même le moteur de l'éditeur, via les attributs skin, et config

Par défaut, jForms utilise le moteur wymeditor.

Configuration générale des éditeurs

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>

Créer une configuration pour un éditeur

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/(..)

Utiliser un autre moteur que wymeditor

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

Pour utiliser CKEditor, vous avez déjà à disposition des scripts pour un éditeur "full", "default" et "basic", et ils sont déjà déclarés dans la configuration de jelix. Téléchargez CKEditor, décompressez-le dans lib/jelix-www/, et indiquez "ckfull", "ckdefault" ou "ckbasic" dans l'attribut config de la balise <htmleditor>. Et c'est tout !

Bien sûr, si vous voulez avoir un éditeur personnalisé, voici ce que vous devez faire. Dans le fichier mainconfig.ini.php :


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

Dans 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

Dans js/tinymce_default.js, créer une fonction jelix_tinymce_default() comme indiqué dans la section précédente. Tout les formulaires avec des éléments <htmleditor> qui ont config="default" utiliseront cet éditeur.