Fundamentos do Editor de Rich Text rich-text-editor-essentials

Visão geral overview

Um Editor de Rich Text (RTE) permite inserir texto com marcação.

Para componentes das Comunidades, embora semelhantes ao editor de rich text no ambiente do autor, afeta o texto inserido no ambiente de publicação.

Ativação do editor de rich text enabling-rich-text-editor

Os componentes das comunidades que permitem conteúdo gerado pelo usuário (UGC) podem ser habilitados para permitir RTE. Se o componente foi adicionado a uma página ou incluído em um função, o RTE pode ou não estar ativado por padrão.

Se não estiver ativado, basta inserir modo de edição do autor, selecione o componente para edição e selecione o Rich Text Editor caixa de seleção

O RTE está disponível para os seguintes componentes do Communities:

Personalização customization

A personalização do editor de rich text é possível, pois a implementação é baseada em CKEditor.

A configuração atual dos componentes do Communities está em cq.social. scf clientlib, no repositório em

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

Não é recomendado modificar o clientlib cq.social.scf, pois atualizações futuras podem substituir qualquer edição.

Exemplo de personalização: links integrados example-customization-inline-links

Por questões de segurança, as opções de hiperlink não estão incluídas no conjunto de ícones de rich text apresentado aos membros por padrão. A capacidade de danificar é extensa quando os hrefs são permitidos no UGC.

Para adicionar as opções de hiperlink à barra de ferramentas:

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