WEB Editor

Editer du HTML depuis un navigateur

Principe

Le plugin WEBEditor permet aux utilisateurs de rédiger des contenus grâce à un éditeur WYSIWYG. Le contenu produit est au format HTML conservant ainsi le format appliqué, par l’utilisateur, au texte rédigé. Grâce à cet éditeur, deux types de contenus peuvent être produits : contenus de documents ou emails à envoyer.

Afin de faciliter l’utilisateur du WEBEditor, trois plugins sont mis à dispositions :

  • CreateWebDocumentPlugin
  • EditWebDocumentPlugin
  • MailEditorPlugin

Les constructeurs de ces plugins acceptent une collection d’options permettant de les configurer. Les options peuvent ainsi être fournies de la manière suivante :


new CreateWebDocumentPlugin({
    '<option name>': <option value>
});
Clé Type Description
closeOnPlaceChange Booléen Indique si le WEBEditor doit être fermé lors d’un changement de place
over Booléen Indique si le WEBEditor doit être affiché par dessus la page courante
template String Identifiant du modèle à pré-charger
templates Fonction Fonction permettant de filtrer les templates disponibles au sein du WEBEditor

Modèles

Afin d’aider les utilisateurs dans la rédaction de leurs contenus, un modèle peut être appliqué au contenu. Au sein de l’éditeur, une action de la barre de menu permet de sélectionner le modèle à appliquer. Le modèle sélectionné (au format HTML) remplace le texte en cours de rédaction pour permettre à l’utilisateur de rédiger un contenu respectant le modèle sélectionné.

Les modèles sont déterminés automatiquement en fonction du type de contenu à rédiger (document ou email) grâce à une recherche. Pour les documents HTML, les template de type (tag TemplateType) dont la valeur est DOCUMENT_HTML sont proposés. Pour les emails, la valeur recherchée est Email.


Pour définir le modèle chargé dès l’ouverture de l’éditeur, son identifiant doit être fourni via l’option template.

La liste de modèles proposés peut être alimentée programmatiquement en surchargeant la détermination des modèles grâce à l’option templates :


new CreateWebDocumentPlugin({
    'templates': () => { return { 
        subscribe: subscriber => { subscriber([
            {id:'template1', label:'Mon modèle n°1'}, 
            {id:'template2', label:'Mon modèle n°2'}
        ])}}
    }
}).open();

new CreateWebDocumentPlugin({
    'templates': () => { return { subscribe: searchForTemplates} }
}).open();

function searchForTemplates(callback){
    var request = new SearchRequest();
    var filters = new AndClause();
    request.addFilterClause(filters);

    var criterion = new Criterion(); 
    criterion.setName("classid");
    criterion.setType("STRING");
    criterion.addValue("Document");
    filters.addCriterion(criterion);

    JSAPI.get().document().search(request, results => 
        callback(results.map( result => { return {id: result.getId(), label: result.getId()}} ))
    );
}

Variables

Lors de la sélection d’un modèle HTML, un contenu HTML est généré à partir des variables fournies à l’éditeur.

Par défaut, les variables suivantes peuvent être utilisées au sein d’une instance de WEBEditor :

  • Si un formulaire d’indexation de composant est ouvert, tous ses champs peuvent être utilisés ainsi que les noms localisés de ses champs ( Localized_tagName)
  • Le libellé de l’utilisateur courant (CurrentUser)
  • La date du jour (DayDate)


Pour ajouter ou surcharger des variables, il suffit d’ajouter une option dans la collection d’options fournie dans le constructeur du plugin.

Documents

A l’aide du plugin WEBEditor, un utilisateur crée ou modifie un document au contenu HTML depuis FlowerDocs GUI.

Création

Le WEBEditor permet la génération d’un contenu de document au format HTML. Ce contenu est stocké sous la forme d’un fichier temporaire pouvant ensuite être utilisé de différentes manières. Par défaut, lorsque l’utilisateur clique sur le bouton Valider, un document simple est créé : aucune indexation ne lui est demandée.


Options possibles

Clé Type Description
instantiator Fonction Fonction permettant à partir d’un fichier d’instancier le document à créer
indexator Fonction Fonction permettant de gérer la création du document instancié
index Booléen Indique si un formulaire d’indexation doit être affiché
(uniquement si l’option indexator n’est pas définie)


new CreateWebDocumentPlugin().open()

new CreateWebDocumentPlugin({
    'template': '<template id>',
    'RefClient': 'abcd',
    'index': true
}).open()

Le document à créer peut être indexé manuellement par un utilisateur et/ou de manière programmatique :


new CreateWebDocumentPlugin({
    'index': true
}).open()

new CreateWebDocumentPlugin({
    'instantiator': function (file) {
        var doc = new Document();
        doc.setName(file.Name);
        doc.addFile(file.id);
        doc.setClassId('CourrierSortant');
        return doc;
    }
}).open()

let formAPI = JSAPI.get().getLastComponentFormAPI();
new CreateWebDocumentPlugin({
    'instantiator': function (file) {
        var doc = new Document();
        doc.setName(file.Name);
        doc.addFile(file.id);
        doc.setClassId('CourrierSortant');
        if(formAPI){
            TagOracle.predict(formAPI.getComponent(), doc);
        }
        return doc;
    },
    'index': true
}).open()

Edition

Le mode édition du WEBEditor permet la modification du contenu HTML d’un document. Le contenu du document doit être au format HTML pour pouvoir être édité. Pour un fonctionnement optimal, ce contenu aura été généré à l’aide du WEBEditor.


var id = JSAPI.get().getLastComponentFormAPI().getComponent().getId();
var plugin = new EditWebDocumentPlugin({'id': id});
plugin.open();

Lorsque l’utilisateur valide ses modifications, le contenu du document est remplacé avec celui présent dans l’éditeur.

Emails

Durant la rédaction d’un email, l’utilisateur peut saisir :

  • un ou plusieurs destinataires principaux
  • un ou plusieurs destinataires à mettre en copie
  • le corps de l’email à envoyer
  • sa signature


Options possibles

Clé Type Description
configuration String Identifiant de la configuration SMTP
to String Liste des adresses emails des destinataires (séparées par des virgules)
cc String Liste des adresses emails à mettre en copie (séparées par des virgules)
subject String Sujet de l’email
postProcessor Fonction Fonction permettant de manipuler l’email rédigé
signature String Identifiant de la signature à pré-charger
signatures Fonction Fonction permettant de filtrer les signatures disponibles dans le MailEditor

Pour que l’email soit envoyé lorsque l’utilisateur clique sur le bouton Envoyer, l’option configuration doit être fournie avec l’identifiant de la configuration SMTP à utiliser.


new MailEditorPlugin({
    'to': '<email address>',
    'subject': 'Hello !',
    'configuration': '<SMTP configuration id>',
    'template': '<template id>',
    'signature': '<signature id>'
}).open()

Si cette option n’est pas fournie, l’email ne sera pas envoyé. En revanche, l’email rédigé peut être traité de manière applicative. En effet, dans certains cas l’email doit être envoyé depuis un processus et intégré au stock d’échanges.


new MailEditorPlugin({
    'postProcessor': function(email){
        var doc = new Document();
        doc.setName(email.subject);
        doc.addFile(email.body.id);
        doc.setClassId('CO_SupplierDocument');
        doc.addTag('CO_SupplierNature', 'Mail', false)
        doc.addTag('ClientLink', JSAPI.get().getLastComponentFormAPI().getComponent().getId(), false)
        JSAPI.get().document().create([doc], function (created) {});
    }
}).open()