The attribute config indicates the name of a configuration file of an editor. Its default value is default.

Configurations are declared in the section [htmleditors] in the configuration of Jelix. Here is its default content:

[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

For a better understanding:

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

• ccc is the name of the configuration
• nnn is the name of the engine
• sss is the identifier of a skin
• ccc.engine.file contains the link of the javascript file of the engine
• ccc.config contains the link of the configuration file of the editor (see below)
• ccc.skin contains the link of the CSS file for the skin

This links are javascript or css file needed by the editor. The path should be relative to the base path of the application (so, relative to the basePath value).

For the engine (ccc.engine.file), you can specify several javascript files as you can see in the example.

Of course, you can declare several 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

Here there are three configurations, "default", "simple" and "full" and two skins, "default" and "blue".

So, if you want to use the config "full" and the skin "blue":

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

Most of existing wysiwyg HTML editors can be configured, and for each different editor, the way how we configured them is different. And this configuration is made in Javascript.

So to declare a configuration, you have to create a javascript function which will configure the editor you want to use. This function should be in a specific javascript file and you have to indicate the url of this file in the configuration of jelix, as you saw above.

For example, if you want to create a new configuration "myconfig" for wymeditor, you create a file www/js/wymeditor_myconfig.js (you can choose any name). And then you indicate it in the configuration file:

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

The javascript function you must create should have a name which follows a specific scheme jelix_eee_ccc(), where eee is the identifier of the editor (which is written into *.engine.name), and where ccc is the identifier of the configuration. So in our example, the name should be jelix_wymeditor_full(). This function receives the id of the textarea, the id of the form, the skin name and an object containing configuration values from jelix (in jelix 1.1, it was only a string containing the language code of the application).

This last parameter contains these properties :

• locale: the language code (valueof jApp::config()->locale)
• basePath: the value of basePath
• jqueryPath: The URL path to the jquery library
• jelixWWWPath: The URL path to the jelix-www content.

Here is an example of this function, which add here a specific CSS file to wymeditor for the content to edit (this is not the skin of the editor):

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'
           })
        }
)}

Note that, for Wymeditor and in the context of Jelix, you must redefine the options updateSelector and updateEvent as indicated in this example.

For more details about the configuration of wymeditor, see the documentation of this project: http://trac.wymeditor.org/trac/wiki/0.5/(..).

If you want to use tinymce or fckeditor, no problem. Declare javascript files of this editors in the configuration of Jelix, and a configuration file for the editor. Here are some examples with popular editors.

Careful about file names, it can be different.

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:[ /* here the configuration of toolbars */],
       /*otherproperty:value,*/
     };
    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