Principes élémentaires de l’éditeur de texte enrichi rich-text-editor-essentials

Vue d’ensemble overview

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

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

Activation de l’éditeur de texte enrichi enabling-rich-text-editor

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. Si le composant a été ajouté à une page ou inclus dans une fonction, l’éditeur de texte enrichi peut être activé par défaut ou non.

S’il n’est pas activé, il vous suffit d’entrer 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 customization

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 le cq.social. scf clientlib, 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.

Exemple de personnalisation : liens insérés example-customization-inline-links

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 :

/libs/clientlibs/social/commons/scf/ckrte.js 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
};