Essentiële elementen van de Rich Text Editor rich-text-editor-essentials

Overzicht overview

Een Rich Text Editor (RTE) biedt de mogelijkheid om tekst met opmaak in te voeren.

Voor communautaire componenten, terwijl gelijkaardig aan RTF-editor in de ontwerpomgeving, heeft dit invloed op tekst die wordt ingevoerd in de publicatieomgeving.

RTF-editor inschakelen enabling-rich-text-editor

De componenten van gemeenschappen die gebruiker geproduceerde inhoud (UGC) toestaan kunnen worden toegelaten om RTE toe te staan. Afhankelijk van of de component aan een pagina is toegevoegd of binnen een function, kan RTE door gebrek worden toegelaten of niet.

Als deze optie niet is ingeschakeld, voert u gewoon de invoer in bewerkingsmodus auteurselecteert u de component die u wilt bewerken en selecteert u de component Rich Text Editor selectievakje.

RTE is beschikbaar voor de volgende componenten van de Gemeenschappen:

Aanpassing customization

Aanpassing van de rijke teksteditor is mogelijk omdat de implementatie is gebaseerd op CKEditor.

De huidige configuratie voor communautaire componenten is in de cq.social. scf clientlib, gevestigd in de gegevensopslagruimte op

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

Het wijzigen van de client lib cq.social.scf wordt niet aangeraden, omdat toekomstige upgrades mogelijk alle bewerkingen overschrijven.

Voorbeeld van aanpassing: Inline-koppelingen example-customization-inline-links

Vanwege beveiligingsproblemen zijn de hyperlinkopties niet opgenomen in de set met RTF-pictogrammen die standaard aan leden worden gepresenteerd. De mogelijkheid tot stuipen is uitgebreid wanneer hrefs in UGC zijn toegestaan.

De hyperlinkopties toevoegen aan de werkbalk:

/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
};