Principes de base de l’éditeur de texte enrichi

Présentation

Un éditeur de texte enrichi (RTE) permet de saisir du texte avec des balises.

Pour les composants Communities, bien que similaire à l’éditeur de texte enrichi dans l’environnement de création, il affecte le texte saisi dans l’environnement de publication.

rich-text-editor

Activation de l’éditeur de texte enrichi

Les composants de communauté qui autorisent le contenu généré par l’utilisateur peuvent être activés pour autoriser l’éditeur de texte enrichi. Selon que le composant a été ajouté à une page ou inclus dans une fonction 🔗, l’éditeur de texte enrichi peut être activé ou non par défaut.

S’il n’est pas activé, il vous suffit de saisir le mode d’édition de l’auteur, de sélectionner le composant à modifier et de cocher la case Rich Text Editor.

L’éditeur de texte enrichi est disponible pour les composants Communities suivants :

Personnalisation

La personnalisation de l’éditeur de texte enrichi est possible, car l’implémentation est basée sur CKEditor.

La configuration actuelle des composants Communities se trouve dans la balise cq.social. scf clientlib, située dans le référentiel à l’adresse

/libs/clientlibs/social/commons/scf/ckrte.js

La modification de la bibliothèque cliente cq.social.scf n’est pas recommandée, car les futures mises à niveau peuvent remplacer toute modification.

En raison de problèmes de sécurité, les options de lien hypertexte ne sont pas incluses dans l’ensemble d’icônes de texte enrichi présentées aux membres par défaut. Les risques de malentendu sont importants lorsque les trois-quarts sont autorisés dans le contenu généré par l’utilisateur.

Pour ajouter les options de lien hypertexte à la barre d’outils :

  • Ajoutez une barre d’outils nommée "links".
    • { name: 'links', items: [ 'Link','Unlink','Anchor' ] }
  • Sélectionnez Enregistrer tout.

/libs/clientlibs/social/commons/scf/ckrte.js

CKRte.prototype.config = {
    toolbar: [
        { name: "basicstyles",
           items: ["Bold", "Italic", "Underline", "NumberedList", "BulletedList", "Outdent", "Indent", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "TextColor"]
        },
        { name: 'links',
           items: [ 'Link','Unlink','Anchor' ]
        }
    ],
    autoParagraph: false,
    autoUpdateElement: false,
    removePlugins: "elementspath",
    resize_enabled: false
};

Sur cette page