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 semelhante ao editor de rich text no ambiente de criação, 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 uma função, o RTE pode ou não estar habilitado por padrão.

Se não estiver habilitado, basta entrar no modo de edição do autor, selecionar o componente para edição e marcar a caixa de seleção Rich Text Editor.

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 no CKEditor.

A configuração atual dos componentes das Comunidades está no 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
};