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=ckeditor
ckdefault.engine.name=ckeditor
ckfull.engine.name=ckeditor
ckbasic.engine.name=ckeditor

Comme vous pouvez le voir, plusieurs configuration sont possibles, puisqu'il y en a 4 de définit. Ainsi, pour chaque configuration, il peut y avoir une ou plusieurs paramètres, commençant par le nom de la configuration : default, ckdefault etc. Ici il n'y a qu'une propriété définit, engine.name, qui indique le nom de l'éditeur à utiliser, et qui est en fait un nom utilisé dans une fonction Javascript de chargement. Voir plus bas.

Pour chaque configuration, il faut également spécifier les fichiers JS et CSS à utiliser. On utilise pour cela les les webassets. Le groupe de webassets pour une configuration doit prendre le nom de la configuration (ici default), préfixé par jforms_htmleditor_. Le groupe de webassets pour la configuration default est celui-ci :

[webassets_common]

;...

jforms_htmleditor_default.js[]="$jelix/ckeditor5/ckeditor.js"
jforms_htmleditor_default.js[]="$jelix/js/jforms/htmleditors/ckeditor_default.js"

Vous remarquerez que l'on inclus, en plus du fichier JS de CKEditor, ckeditor.js, un fichier ckeditor_default.js fourni par Jelix. Ce code Javascript permet d'instancier correctement CKEditor pour un textarea donné. Voir la section suivante.

Il est aussi possible de définir un groupe de webassets pour chaque "skin" utilisé pour l'éditeur, quand celui dispose d'un système de theme. Pour cela le nom du groupe a la forme jforms_htmleditor_<nom configuration>.skin.<nom skin>.

Par exemple, pour déclare les assets de la skin default de la configuration default, on va déclarer le groupe suivant (qui ne comporte qu'une feuille CSS) :

jforms_htmleditor_default.skin.default.css="somewhere/skins/default/skin.css"

Pour pouvoir utiliser la "skin" silver, on aura :

jforms_htmleditor_default.skin.silver.css="somewhere/skins/silver/skin.css"

Si vous voulez utiliser la config default avec la skin silver, dans votre fichier jForms vous devez avoir :

  <htmleditor ref="description" config="default" skin="silver">
	<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 en javascript.

jForms a donc besoin de savoir comment instancier et paramétrer l'éditeur.

Pour cela un script doit être fourni. Il doit contenir une fonction javascript qui se chargera de paramétrer l'éditeur selon vos besoins. Cette fonction doit se trouver dans un fichier, dont vous indiquez le chemin dans un groupe de webassets (comme wymeditor_default.js plus haut).

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

[htmleditors]
ckfancy.engine.name=ckeditor

[webassets_common]

;...

jforms_htmleditor_ckfancy.js[]="$jelix/ckeditor5/ckeditor.js"
jforms_htmleditor_ckfancy.js[]="js/ckeditor_ckfancy.js"

La fonction dans ce fichier doit se nommer d'une manière précise : jelix_<engine name>_<nom configuration>(), où <engine name> est l'identifiant de l'éditeur, qui est inscrit dans le paramètre *.engine.name, et <nom configuration> l'identifiant de la configuration. Donc pour notre exemple, le nom doit être jelix_ckeditor_ckfancy(). Cette fonction reçoit en paramètre l'id du textarea qui contient le contenu HTML, l'id du formulaire jForms, le nom de la skin et un objet de configuration.

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_ckeditor_ckfancy(textarea_id, form_id, skin, config){

    var ckConfig = {
        toolbar: [ 'bold' ],
        language: config.locale.substr(0,2).toLowerCase()
    };

    ClassicEditor
        .create( document.querySelector( '#'+textarea_id ), ckConfig )
        .then( function(editor) {
                jQuery('#'+form_id).bind('jFormsUpdateFields', function(event){
                    editor.updateSourceElement();
                });
            } )
        .catch( function(error) {
            console.error( error );
        });
)}

Il faut déclarer les fichiers javascript et css à charger, dont l'un doit être un script de chargement comme expliqué précédement.

Voici un exemple avec TinyMCE . Attention aux noms de fichiers JS des éditeurs en question, ils peuvent être différents.

TinyMCE ¶

[htmleditors]
tinymceconf.engine.name = tinymce

[webassets_common]
;...
jforms_htmleditor_tinymceconf.js[]="tinymce/tinymce.js"
jforms_htmleditor_tinymceconf.js[]="js/tinymce_default.js"
jforms_htmleditor_tinymceconf.skin.default.css="tinymce/skins/default/full.css"