Configuration de l’éditeur de texte enrichi

Vous devez activer certaines des fonctions associées à l’éditeur de RichText, mais vous ne savez pas comment procéder.

Solution

Pour ajouter des fonctions supplémentaires à l'éditeur de texte enrichi, personnalisez le composant de l'éditeur. Étant donné qu’il n’est pas recommandé que les modifications soient effectuées dans le dossier /libs, il est nécessaire de les recouvrir.

1. Créez le dossier /apps/foundation/components folder.
2. Copiez le nœud /libs/foundation/components/text dans le dossier ci-dessus.
3. Utilisez l’explorateur de contenu de CRX, accédez à /apps/foundation/components/text/dialog/items/text. Toutes les fonctionnalités disponibles seront activées ou désactivées par une propriété associée de ce nœud. Pour afficher la fonction nouvellement activée, la page doit être rechargée.

Remarque : on suppose que les propriétés définies ci-dessous sont des booléennes, sauf indication contraire. En outre, les textes en gras sont les propriétés du nœud de texte sous /apps.

• enableParagraphFormat (true|false)

Remarque : pour définir des formats complémentaires, créez un nom de nœud non structuré « formats » sous le nœud de texte. Pour chaque type de format de paragraphe, ajoutez un nœud enfant non structuré (sous le nœud « formats » avec un nom aléatoire) contenant une propriété « tag » et une propriété « description ». La propriété « balise » définit la balise de bloc qui est appliquée aux fragments correspondants de texte (par exemple, utilisez « p » pour les paragraphes, « h1 » pour titres importants, etc.). La propriété « description » est utilisée dans la liste déroulante pour l'affichage du nom (par exemple, « paragraphe », « titre 1 », etc.).

• enableStyle (true|false)

Remarques : les deux nœuds suivants doivent être définis. Le fichier CSS doit être inclus manuellement dans l’en-tête de tous les modèles qui utilisent RTE.

1. Ajoutez un nœud nt:non structuré (sous le nœud « texte ») appelé "externalStyleSheets" pour définir les feuilles de style externes. Ajoutez chaque feuille de style en tant que propriété avec un nom arbitraire. La valeur de la propriété doit définir un chemin de référentiel pour la feuille de style, par exemple « /path/to/some/stylesheet.css ».
2. Ajoutez un nœud nt:non structuré (sous le nœud « texte ») appelé « cssStyles » pour définir les styles qui seront appliqués à un fragment de texte. Définissez une propriété pour chaque style. Le nom de la propriété définit le nom de classe CSS à appliquer. Cette valeur doit correspondre au nom du fichier CSS à partir de l’étape précédente. La valeur de la propriété définit le texte affiché dans la liste déroulante pour identifier le style.

• enableSpecialChars (true|false)

Remarque : par défaut, les seuls caractères spéciaux pouvant apparaître selon ceux correspondant à « trade mark » (™), « registered » (®) et « copyright » (©). Pour des caractères spéciaux supplémentaires, vous devez procéder comme suit :

Créez un nœud nt:non structuré (sous le nœud « text ») appelé specialCharsConfig.

Créez un nœud nt:non structuré appelé chars sous le nœud specialCharsConfig. Sous le nœud chars, vous pouvez spécifier des caractères et des plages de caractères qui apparaîtront dans la boîte de dialogue.

1. Pour un seul caractère, créez un nœud nt:unstructured. Ce nœud contient une propriété d’entité avec la valeur du caractère spécial. Par exemple, un nœud « copyright » avec la propriété « entity » et la valeur « © » ajoutera le caractère ©. La notation d'entité doit être au format « &...; » lors de la définition d'un caractère unique.
2. Pour la plage de caractères, créez un nœud nt:unstructured avec un nom arbitraire. Ce nœud possède des propriétés rangeStart (type : Long) et rangeEnd (type : long). Ces propriétés définissent une plage de caractères. Par exemple, rangeStart: 65, rangeEnd: 90 ajoutent les lettres de A à Z à la boîte de dialogue. Lorsque vous spécifiez une plage de caractères, vous devrez spécifier le numéro unicode correspondant.

• La fonctionnalité Retrait/retrait négatif est activée par défaut. Elle peut être désactivée en ajoutant un fichier annt:unstructured appelé « listButtons » sans propriétés. Les autres boutons (« ordered », « unordered ») doivent explicitement être configurés si le nœud « listButtons» est ajouté.

• La fonctionnalité d’ancrage est activée par défaut. Pour la désactiver, ajoutez un nœud nt:unstructured appelé « linkButtons ». Sous le nœud « linkButtons », ajoutez les propriétés « créer un lien », « dissocier » et « ancrage ». Chaque propriété est de type « booléenne ». Chaque propriété définit si le bouton correspondant est activé ou désactivé.

• enableSubSuperScript (true|false)

• enableFontSize (true|false)

• enableSourceEdit (true|false)

• enableFont (true|false)

• enableColors (true|false)

Pour activer tableau dans l'éditeur de texte enrichi :

1. Créez le nœud rtePlugins (nt:non structuré) sous /libs/foundation/components/text/dialog/items/text.
2. Créez un tableau de nœud (nt:non structuré) sous/libs/foundation/components/text/dialog/item/text/rtePlugins.
3. Pour le nœud du tableau, ajoutez une propriété de chaîne avec la valeur *.

Remarques spéciales:

• Le cache du navigateur client pose problème lors de la configuration de l’éditeur de texte. Si une fonction d’activation n’apparaît pas dans le navigateur, la mémoire cache du navigateur doit être entièrement effacée.
• Voici un exemple de configuration pour que vous puissiez le tester.
• Cette pièce jointe active toutes les fonctions de texte enrichi.
  

Remarque : la configuration est stockée sous /libs. De plus, le static.css Geometrixx sous /etc/design a été ajouté avec un autre style.

S’applique à

Liste CQ5.2.