Configuration des modules externes d’éditeur de texte enrichi configure-the-rich-text-editor-plug-ins

À l’aide de CRXDE Lite, cherchez le composant Texte pour votre projet.

Créez le nœud parent <rtePlugins-node> s’il n’existe pas, avant de configurer tout module externe d’éditeur de texte enrichi :

• Selon votre composant, les nœuds parents sont les suivants :

  • config: .../text/cq:editConfig/cq:inplaceEditing/config
  • un nœud de configuration alternatif : .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
  • text: .../text/dialog/items/tab1/items/text

• Ils sont du type : jcr:primaryType cq:Widget

• Possèdent tous deux les propriétés suivantes :

  • Nom name
  • Type String
  • Valeur ./text

Selon l’interface pour laquelle vous effectuez la configuration, créez un nœud <rtePlugins-node>, s’il n’existe pas :

• Nom rtePlugins
• Type nt:unstructured

Voici comment créer un nœud pour chaque module externe à activer :

• Type nt:unstructured
• Nom ID du module externe requis

Dans votre composant, accédez au nœud <rtePlugins-node>/edit. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Dans le nœud edit, créez une propriété à l’aide des informations suivantes :

• Nom defaultPasteMode
• Type String
• Valeur est l’un des modes de collage requis parmi browser, plaintext ou wordhtml.

Dans votre composant, accédez au nœud <rtePlugins-node>/edit. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Créez un nœud sous le nœud edit destiné à contenir les règles de collage HTML :

• Nom htmlPasteRules
• Type nt:unstructured

Créez un nœud sous htmlPasteRules, destiné à contenir les détails des formats de base autorisés :

• Nom allowBasics
• Type nt:unstructured

Pour contrôler les différents formats admis, créez une ou plusieurs des propriétés ci-dessous sur le nœud allowBasics :

• Nom bold
• Nom italic
• Nom underline
• Nom anchor (pour les liens et les ancres nommées)
• Nom image

Toutes les propriétés sont de type Boolean. Ainsi, dans la valeur appropriée, vous pouvez cocher ou désélectionner la case pour activer/désactiver les fonctionnalités.

D’autres formats peuvent également être définis à l’aide de différentes propriétés ou de différents nœuds, également appliqués au nœud htmlPasteRules :

Dans votre composant, accédez au nœud <rtePlugins-node>/styles. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Créez la propriété features sur le nœud styles :

• Nom features
• Type String
• Valeur * (astérisque)

Enregistrez toutes les modifications.

Accédez au nœud racine de votre composant Texte, par exemple /apps/<myProject>/components/text.

Ajoutez la propriété externalStyleSheets au nœud parent de <rtePlugins-node> :

• Nom externalStyleSheets
• Type String[] (multichaîne ; cliquez sur Multi dans CRXDE)
• Valeurs Chemin d’accès et nom de fichier de chaque feuille de style que vous souhaitez inclure. Utilisez les chemins d’accès au référentiel.

Enregistrez toutes les modifications.

Dans la définition du composant, accédez au nœud <rtePlugins-node>/styles tel que créé dans Activation du sélecteur de liste déroulante Style.

Sous le nœud styles, créez un nœud (également appelé styles) destiné à contenir la liste mise à disposition :

• Nom styles
• Type cq:WidgetCollection

Créez un nœud sous le nœud styles pour représenter un style individuel :

• Nom, vous pouvez spécifier le nom, mais il doit être adapté au style
• Type nt:unstructured

Ajoutez la propriété cssName à ce nœud pour référencer la classe CSS :

• Nom cssName
• Type String
• Valeur Nom de la classe CSS (non précédé d’un point « . » ; par exemple, cssClass au lieu de .cssClass)

Ajoutez la propriété text au même nœud. Elle définit le texte affiché dans la boîte de dialogue de sélection :

• Nom text
• Type String
• Valeur. Description du style, s’affiche dans la zone de sélection de la liste déroulante Style.

Enregistrez les modifications.

Répétez les étapes ci-dessus pour chaque style requis.

Créez un nœud sous le nœud styles. Voir Spécification d’un style.

• Nom : jpn-word-wrap
• Type : nt:unstructure

Ajoutez la propriété cssName au nœud pour référencer la classe CSS. Ce nom de classe est un nom réservé pour la fonction de retour automatique à la ligne du japonais.

• Nom : cssName
• Type : String
• Valeur : jpn-word-wrap (sans préfixe .)

Ajoutez la propriété text au même nœud. La valeur est le nom du style que les auteurs voient lors de la sélection du style.

• Nom : text
  *Type : String
• Valeur : Japanese word-wrap

Créez une feuille de style et spécifiez son chemin d’accès. Consultez spécification de l’emplacement de la feuille de style. Ajoutez le contenu suivant à la feuille de style. Modifiez la couleur d’arrière-plan selon vos besoins.

.text span.jpn-word-wrap {
    display:inline-block;
}
.is-edited span.jpn-word-wrap {
    background-color: #ffddff;
}

Dans votre composant, accédez au nœud <rtePlugins-node>/paraformat. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Créez la propriété features sur le nœud paraformat :

• Nom features
• Type String
• Valeur * (astérisque)

Dans la définition du composant, accédez au nœud <rtePlugins-node>/paraformat, tel que créé dans Activation du sélecteur de liste déroulante Format.

Sous le nœud paraformat, créez un nœud destiné à contenir la liste de formats :

• Nom formats
• Type cq:WidgetCollection

Créez un nœud sous le nœud formats, qui contient les détails pour un format spécifique :

• Nom, vous pouvez spécifier le nom, mais il doit être adapté au format (par exemple, myparagraph, myheading1).
• Type nt:unstructured

Sur ce nœud, ajoutez la propriété pour définir la balise block utilisée :

• Nom tag

• Type String

• Valeur La balise block pour le format, par exemple : p, h1, h2, etc.

  Vous n’avez pas besoin de saisir les crochets de séparation.

Sur le même nœud, ajoutez une autre propriété pour que le texte descriptif s’affiche dans la liste déroulante :

• Nom description
• Type String
• Valeur Texte descriptif pour ce format, par exemple, paragraphe, titre 1, titre 2, etc. Ce texte est affiché dans la liste de sélection Format.

Enregistrez les modifications.

Répétez les étapes pour chaque format requis.

Dans votre composant, accédez au nœud <rtePlugins-node>/misctools. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Créez la propriété features sur le nœud misctools :

• Nom features

• Type String[]

• Valeur specialchars

  (ou String / * si toutes les fonctions sont appliquées pour ce module externe)

Sous misctools, créez un nœud destiné à contenir les configurations de caractères spéciaux :

• Nom specialCharsConfig
• Type nt:unstructured

Sous specialCharsConfig, créez un autre nœud destiné à contenir la liste de caractères :

• Nom chars
• Type nt:unstructured

Sous chars, ajoutez un nœud destiné à contenir une définition de caractère individuel :

• Nom Vous pouvez spécifier le nom, mais il doit refléter le caractère, par exemple, « moitié ».
• Type nt:unstructured

Ajoutez la propriété suivante à ce nœud :

• Nom entity
• Type String
• Valeur Représentation HTML du caractère nécessaire, par exemple, &189; pour la fraction un demi.

Enregistrez les modifications.

Appliquez les étapes 1 à 3 de la section Définition d’un caractère unique.

Sous chars, ajoutez un nœud destiné à contenir la définition de la plage de caractères :

• Nom Vous pouvez spécifier le nom, mais il doit refléter la plage de caractères, par exemple, « crayons ».
• Type nt:unstructured

Sous ce nœud (nommé en fonction de votre plage de caractères spéciaux), ajoutez les deux propriétés suivantes :

• Nom rangeStart

  Type Long
  Valeur Représentation Unicode (décimale) du premier caractère de la plage

• Nom rangeEnd

  Type Long
  Valeur Représentation Unicode (décimale) du dernier caractère de la plage

Enregistrez les modifications.

Par exemple, définissez une plage comprise entre 9 998 et 1 0000 vous fournit les caractères suivants.

Figure : Définition dans CRXDE d’une série de caractères pour qu’elle soit disponible dans l’éditeur de texte enrichi

Dans votre composant, recherchez le nœud <rtePlugins-node>/table. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Créez la propriété features sur le nœud table :

• Nom features
• Type String
• Valeur *

Définissez l’emplacement des feuilles de style CSS pour y faire référence. Voir Spécification de l’emplacement de votre feuille de style, car cela revient à définir les styles de texte. L’emplacement peut être défini si vous avez défini d’autres styles.

Sous le nœud table, créez les nœuds suivants selon les besoins :

• Pour définir des styles pour le tableau entier (disponibles sous Propriétés du tableau) :

  • Nom tableStyles
  • Type cq:WidgetCollection

• Pour définir des styles pour des cellules individuelles (disponibles sous Propriétés de la cellule) :

  • Nom cellStyles
  • Type cq:WidgetCollection

Créez un nœud (sous le nœud tableStyles ou cellStyles, selon ce qui est approprié) pour représenter un style individuel :

• Nom  Vous pouvez spécifier le nom, mais il doit refléter le style.
• Type nt:unstructured

Sur ce nœud, créez les propriétés :

• Pour définir le style CSS référencé,

  • Nom cssName
  • Type String
  • Valeur Nom de la classe CSS (sans préfixe ., par exemple, cssClass au lieu de .cssClass)

• Pour définir un texte descriptif à afficher dans le sélecteur pop-up,

  • Nom text
  • Type String
  • Valeur Texte à afficher dans la liste de sélection

Enregistrez toutes les modifications.

Accédez à la page https://extensions.openoffice.org/.

Sélectionnez la langue requise et téléchargez le fichier ZIP contenant les définitions d’orthographe. Extrayez le contenu de l’archive dans votre système de fichiers.

Recherchez les fichiers .aff et .dic. Conservez le nom du fichier en minuscules. Par exemple, de_de.aff et de_de.dic.

Chargez les fichiers .aff et.dic dans le référentiel à l’emplacement /apps/cq/spellchecker/dictionaries.

Dans votre composant, recherchez le nœud <rtePlugins-node>/undo. Créez ces nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Sur le nœud undo, créez la propriété :

• Nom maxUndoSteps
• Type Long
• Valeur Nombre d’étapes annulées à enregistrer dans l’historique. La valeur par défaut est de 50. Utilisez 0 pour désactiver complètement l’annulation/le rétablissement.

Enregistrez les modifications.

Dans votre composant, accédez au nœud <rtePlugins-node>/keys. Créez les nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Sur le nœud keys, créez la propriété :

• Nom tabSize
• Type String
• Valeur Nombre d’espaces à utiliser pour le tabulateur.

Enregistrez les modifications.

Dans votre composant, recherchez le nœud <rtePlugins-node>/lists. Créez ces nœuds s’ils n’existent pas. Pour plus d’informations, voir Activation d’un module externe.

Sur le nœud lists, créez le paramètre identSize :

• Nom  : identSize
• Type  : Long
• Valeur Nombre de pixels nécessaires pour la marge en retrait.

Sur le nœud ../items/text de la définition de boîte de dialogue pour le composant, créez une propriété :

• Nom height
• Type Long
• Valeur Hauteur du canevas de publication, exprimée en pixels.

Enregistrez les modifications.

À l’aide de CRXDE Lite, cherchez le composant Texte pour votre projet.

Créez un nœud au même niveau que <rtePlugins-node>, c’est-à-dire créez le nœud sous le nœud parent de <rtePlugins-node> :

• Nom htmlRules
• Type nt:unstructured

Sous htmlRules, créez un nœud.

• Nom links
• Type nt:unstructured

Sous le nœud links, définissez les propriétés, au besoin :

• Style CSS pour les liens internes :

  • Nom cssInternal
  • Type String
  • Valeur Nom de la classe CSS (non précédé d’un point « . » ; par exemple, cssClass au lieu de .cssClass)

• Style CSS pour les liens externes

  • Nom cssExternal
  • Type String
  • Valeur Nom de la classe CSS (non précédé d’un point « . » ; par exemple, cssClass au lieu de .cssClass)

• Tableau de protocoles valides, dont les protocoles https://, https://, file://, mailto: et autres,

  • Nom protocols
  • Type String[]
  • Valeurs Un ou plusieurs protocoles

• defaultProtocol (propriété de type String) : protocole à utiliser si l’utilisateur n’en a pas spécifié un explicitement.

  • Nom defaultProtocol
  • Type String
  • Valeurs Un ou plusieurs protocoles par défaut

• Définition de la gestion de l’attribut cible d’un lien. Créez un nœud :

  • Nom targetConfig
  • Type nt:unstructured

  Sur le nœud targetConfig : définissez les propriétés nécessaires :

  • Spécifiez le mode cible :

    • Nom mode

    • Type String)

    • Valeurs  :

      • auto : signifie qu’une cible automatique est choisie

        (spécifié par la propriété targetExternal pour les liens externes ou targetInternal pour les liens internes).

      • manual : non applicable dans ce contexte

      • blank : non applicable dans ce contexte

  • Cible des liens internes :

    • Nom targetInternal
    • Type String
    • Valeur Cible des liens internes (utilisée uniquement lorsque le mode est auto)

  • Cible des liens externes :

    • Nom targetExternal
    • Type String
    • Valeur Cible des liens externes (utilisé uniquement lorsque le mode est auto).

Enregistrez toutes les modifications.