Création d'une balise d'élément modifiable

La balise d'élément modifiable permet de rendre modifiables des éléments issus d'objets de contenu et de zones de site lors de l'affichage au moyen d'un portlet d'afficheur de contenu Web lorsque la page est en mode édition.

Pourquoi et quand exécuter cette tâche

Format d'une balise d'élément modifiable :

[EditableElement type=" " context=" " name=" " key=" " format=" " mode=" " 
     callback=" " stateChangeCallback=" " refreshValueOnEdit=" " class=" " htmlencode=" " placeholder=" "]

[/EditableElement]

Remarque : N'utilisez pas cette balise si les caches de rendu de base ou avancés sont activés, car dans ce cas, les mises à jour de création ne s'affichent pas immédiatement sur la page rendue.

Pour créer une balise d'élément modifiable :

Procédure

Cliquez sur Insérer une balise dans un modèle de présentation ou une zone de conception d'élément. La boîte de dialogue Aide sur les balises s'ouvre.
Sélectionnez EditableElement comme type de balise.

Sélectionnez le type d'élément dans lequel l'élément est stocké, ainsi que le contexte utilisé pour déterminer l'élément à référencer :

S'il n'est pas défini, le type d'élément est content et le contexte est current.

Tableau 1. Matrice de contexte et de type d'objetCe tableau décrit de quelle façon le contexte change en fonction des différents types d'objet.
Contexte et type d'objet	`type="auto"`	`type="content"`	`type="sitearea"`	`type="parent"`	`type="top"`
`context="Selected"` Si cette option est sélectionnée, le contexte est défini par l'objet sélectionné. Vous pouvez sélectionner un objet en cliquant sur Sélectionner. Ce paramètre est ajouté à la balise en tant que paramètre name=" " :	Ce paramètre rend un élément issu de l'objet de contenu sélectionné modifiable lorsque la page est en mode édition.	Ce paramètre rend un élément issu de l'objet de contenu sélectionné modifiable lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément sélectionné est une zone de site, ce paramètre rend modifiable l'élément issu de la zone de site lorsque la page est en mode édition. Si l'élément sélectionné est un objet de contenu, ce paramètre rend modifiable l'élément de la zone de site parent de l'objet de contenu lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément du parent de l'élément sélectionné lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément du premier élément dans le chemin de l'élément sélectionné lorsque la page est en mode édition.
`context="Current"` Si cette option est sélectionnée, le contexte est défini par l'objet courant.	Ce paramètre rend modifiable un élément de l'élément affiché lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément de l'objet de contenu en cours lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément affiché est une zone de site, ce paramètre rend modifiable l'élément de la zone de site en cours lorsque la page est en mode édition. Si l'élément affiché est un objet de contenu, ce paramètre rend modifiable l'élément de la zone de site parent de l'objet de contenu lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément de la zone de site parent de l'élément affiché lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément du premier élément dans le chemin de l'élément affiché lorsque la page est en mode édition.
`context="Autofill"` Utilisez cette option lorsque l'élément en cours de référencement est déterminé par les paramètres de recherche d'un composant de menu, de navigateur ou de taxinomie. Si la balise n'est pas utilisée dans un composant de menu, de navigateur ou de taxinomie, le contexte revient à l'élément en cours.	Ce paramètre rend modifiable un élément de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément d'objet de contenu renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition. Si une zone de site est sélectionnée, aucun élément n'est modifiable.	Si l'élément en cours renvoyé par un composant de menu, de navigateur ou de taxinomie est une zone de site, l'élément de la zone de site est modifiable lorsque la page est en mode édition. Si l'élément en cours renvoyé par un composant de menu, de navigateur ou de taxinomie est un objet de contenu, ce paramètre rend modifiable l'élément de la zone de site parent de l'objet de contenu lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément de l'élément parent de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.	Ce paramètre rend modifiable un élément du premier élément dans le chemin de l'élément renvoyé par un composant de menu, de navigateur ou de taxinomie lorsque la page est en mode édition.

Cliquez sur Sélectionner un modèle de création pour sélectionner un modèle de création approprié. Sélectionnez l'élément à rendre modifiable dans la liste des éléments disponibles. Ce paramètre est ajouté à la balise en tant que paramètre key=" ".
Remarque : Si vous avez sélectionné un type de source parent, supérieur ou une zone de site, vous devez renseigner manuellement le paramètre key=" " dans la balise d'élément modifiable au lieu de cliquer sur Sélectionner le modèle de création.
Indiquez si des sections de début et de fin doivent être incluses. Vous pouvez entrer du texte supplémentaire entre les sections de début et de fin de la balise et d'autres balises de contenu Web, telles qu'une balise de composant ou d'élément.
Cliquez sur OK pour ajouter la balise à votre conception de navigateur.

Que faire ensuite

Lorsque vous ajoutez la balise à votre conception, vous pouvez également ajouter les paramètres suivants à la balise :

Tableau 2. Paramètres de balise supplémentairesCe tableau répertorie les autres paramètres qui peuvent être ajoutés manuellement à cette balise.
Paramètres des balises	Détails
`name=" "`	Vous devez spécifier le nom de l'élément qui est référencé si `context="selected"`. Si vous spécifiez `name="./itemName"`, le chemin réel n'est pas résolu tant que l'élément n'est pas rendu. Comparée à la spécification du chemin d'accès à l'élément, la résolution à l'aide de cette méthode prend un peu plus de temps.
`format=" "`	Si vous spécifiez `format="div"`, la région modifiable est rendue dans une balise div. Si aucun format n'est indiqué, une balise div est utilisée par défaut. Si vous spécifiez `format="span"`, la région modifiable est rendue dans une balise span.
`mode=" "`	Ce paramètre détermine le mode d'édition en ligne. Spécifiez `mode="inplace"` pour spécifier l'édition à la volée d'un élément. Tous les champs ne prennent pas en charge le mode d'édition interne. Si un élément ne prend pas en charge le mode d'édition interne, une boîte de dialogue est utilisée. Spécifiez `mode="embed"` pour activer l'édition imbriquée d'un élément. Toutes les zones ne prennent pas en charge le mode imbriqué. Si un élément ne prend pas en charge le mode imbriqué, le mode boîte de dialogue est utilisé à la place. Spécifiez `mode="dialog"` pour activer l'édition dans une boîte de dialogue. Ce paramètre est utile pour les éléments plus volumineux, tels que des éléments de texte enrichi, qui peuvent ne pas convenir pour l'édition à la volée. Toutes les zones prennent en charge le mode boîte de dialogue. Si un mode n'est pas spécifié, le paramètre par défaut qui est indiqué dans la propriété inplaceEdit.defaultModeForText ou inplaceEdit.defaultModeForRichText du service WCM WCMConfigService est utilisé. Remarque : L'éditeur de texte enrichi par défaut est toujours employé avec le mode 'édition interne' ou 'imbriqué'. Lorsque le mode 'boîte de dialogue' est utilisé, l'éditeur de texte enrichi sélectionné dans les paramètres de portlet de création, ou dans le modèle de contenu pour les objets de contenu, est utilisé.
`callback=" "`	Ce paramètre est utilisé pour faire référence à une promesse i$. La promesse est résolue si l'édition en ligne est terminée, et elle est rejetée si l'édition en ligne est annulée. Pour plus d'informations sur les promesses i$, reportez-vous à la documentation Javadoc. Par exemple: Un rappel standard peut être écrit sous la forme suivante : `var myCallBack=new i$.Promise(); myCallBack.then(function(){window.alert('resolved')}, function(){window.alert('rejected')});return myCallBack;` Si `myCallBack` figure dans une promesse `i$`, le rappel peut être écrit comme suit : `myCallBack`. Une fonction qui renvoie elle-même une nouvelle promesse chaque fois qu'elle est exécutée peut être écrite comme suit : `return (function() {var myCallBack = new i$.Promise(); myCallBack.then(function() {window.alert('resolved');}, function() {window.alert('rejected');}); return myCallBack;})();`
`stateChangeCallback=" "`	Ce paramètre est utilisé pour faire référence à des rappels de changement d'état JavaScript pour tous les changements d'état. Consultez la documentation Javadoc pour plus d'informations. Par exemple, pour spécifier `stateChangeCallback="myStateChangeCallback"`, vous pouvez créer la fonction de rappel de changement d'état suivante : /** * : ID de la région de l'élément d'édition en cours * état : nouvel état * additionalData : données supplémentaires, telles qu'un type de balise, un nom d'élément, des messages */ function myStateChangeCallback(element, state, additionalData) State Constants: // loading value StateChangeEvent.STATE_LOADING = 0; // editing StateChangeEvent.STATE_EDITING = 1; // saving StateChangeEvent.STATE_SAVING = 2; // saved StateChangeEvent.STATE_SAVED = 3; // cancelled StateChangeEvent.STATE_CANCELLED = 4; // error StateChangeEvent.STATE_ERROR = 5; La fonction JavaScript enregistrée est exécutée à chaque changement d'état. Remarque : L'état de chargement est exécuté uniquement la première fois qu'un utilisateur édite l'élément.
`refreshValueOnEdit=" "`	Ce paramètre force l'actualisation de la valeur de balise lorsque l'élément est édité par un utilisateur. Ce paramètre est activé par défaut. Si vous souhaitez désactiver cette fonction, affectez la valeur false à ce paramètre. Restriction : Cet attribut s'applique uniquement aux éléments de texte, aux éléments de texte court, aux éléments numériques ou aux éléments de texte enrichi. Lorsque vous utilisez ce paramètre avec un élément de texte enrichi, vous ne pouvez pas utiliser une référence à une balise de contenu Web dans le contenu d'élément car il n'est pas analysé. Si la zone est en mode dialogue ou correspond à un autre type d'élément, par exemple des données ou une référence de fichier, cette valeur n'a aucun effet. Si ce paramètre a pour valeur false, il n'existe aucun état de chargement pour l'élément.
`class=" "`	Ce paramètre permet d'indiquer une classe CSS à la balise div ou span spécifiée à l'aide du paramètre de format. Remarque : La classe personnalisée que vous indiquez ici doit inclure des styles nommés "saving", "editing" et "error." Ces noms sont requis pour afficher la zone modifiable en mode édition, lors de l'enregistrement d'un élément, et pour afficher les messages d'erreur. La classe css par défaut utilisée pour les zones modifiables à la volée est wcm-default-inplace-editable. Cette classe peut être remplacée en ajoutant le paramètre suivant dans le service WCM WCMConfigService à l'aide de la console WebSphere® Integrated Solutions Console : `inplaceEdit.defaultClasses=class1 class2` Toutes les classes requises sont ajoutées à ce paramètre, séparées par des espaces. Basez vos classes personnalisées sur la feuille de style par défaut située dans le répertoire `AppServer_root\installedApps\nodename\wcm.ear\wcm-inplaceEdit.war\css\default-style.css`. Remarque : Toutes les classes indiquées dans la balise EditableElement ou EditableProperty sont prioritaires sur cette valeur. Si vous devez également utiliser la classe css par défaut, ajoutez-le à la liste des classes. Par exemple: `inplaceEdit.defaultClasses=wcm-default-inplace-editable class1 class2`
`htmlencode=" "`	Si `htmlencode="true"`, les caractères HTML réservés dans les éléments qui affichent du texte sont convertis en entités de caractère. Par exemple, '`<`' est converti en '`<`'. Cette méthode est utile si vous souhaitez empêcher les utilisateurs d'ajouter un code malveillant ou de modifier la présentation de leur texte à l'aide de balises HTML. Si ce paramètre n'est pas spécifié, le paramètre par défaut indiqué par la propriété `cmpnt.htmlEncodeDefault` dans le service WCM WCMConfigService est utilisé pour afficher du texte. Le paramètre par défaut spécifié par la propriété `cmpnt.htmlEncodeUrls` dans le service WCM WCMConfigService est utilisé pour l'affichage des URL. Par défaut, ces propriétés ont la valeur true.
`placeholder=" "`	Le texte entré pour ce paramètre s'affiche lorsqu'il n'existe pas de valeur initiale pour le corps de la zone d'élément modifiable. Par exemple: `placeholder="Enter title"` Vous pouvez également l'utiliser conjointement avec un fournisseur de texte pour restituer le texte traduit. Par exemple: `placeholder="[Plugin:TextProvider provider="com.mycompany.mybundle" key="enter_title"]"` Ces valeurs spéciales sont utilisées pour restituer le texte provenant de sources existantes : `placeholder="useName"` Ce paramètre permet de rendre le nom de l'élément. `placeholder="useTitle"` Ce paramètre permet de rendre le titre de l'élément. `placeholder="useHelpText"` Ce paramètre permet de rendre le texte d'aide de l'élément. `placeholder="useNone"` Ce paramètre permet de n'afficher aucune marque de réservation.

Le texte supplémentaire, le code HTML ou les balises doivent être ajoutés entre les balises [EditableElement] et [/EditableElement]. Le texte et les balises ajoutés ici sont ce qui s'affiche sur la page. Lorsque la page est en mode édition, cette région est modifiable. Lorsqu'elle est ajoutée à votre conception, une balise de propriété correspondante est ajoutée par défaut.

Par exemple, pour afficher un élément modifiable nommé body, utilisez les balises suivantes :

[EditableElement type="content" context="current" key="body"]
[Element type="content" context="current" key="body"]
[/EditableElement]

L'ajout de la valeur pre="true" à la balise d'élément modifiable force l'élément modifiable à conserver le formatage de ligne qui est saisi par l'utilisateur. Par exemple, si un utilisateur saisit des retours à la ligne, ces derniers sont conservés lorsque la zone est sauvegardée. Cette fonction ne s'applique qu'aux éléments de texte courts et de texte. Ce paramètre doit également être ajouté à la balise d'élément pour que les retours à la ligne soient également rendus.

Par exemple:

[EditableElement type="content" context="current" key="body" pre="true"]
[Element type="content" context="current" key="body" pre="true"]
[/EditableElement]

Remarque : Les paramètres context de portalContext et portalMapping ne peuvent pas être utilisés avec la balise editable element. Cette restriction s'applique à la fois à la balise d'élément modifiable proprement dite et aux autres balises qui sont référencées entre les balises [EditableElement] et [/EditableElement].