Princípios básicos do editor de rich text rich-text-editor-essentials

Visão geral overview

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

Para componentes das Comunidades, enquanto são 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 de Comunidades que permitem conteúdo gerado pelo usuário (UGC) podem ser habilitados para permitir o RTE. Dependendo de o componente ter sido adicionado a uma página ou incluído em uma função, o RTE pode ou não ser 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 Editor CKE.

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

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

A modificação da clientlib cq.social.scf não é recomendada, pois as atualizações futuras podem substituir qualquer edição.

Exemplo de personalização: Links em linha example-customization-inline-links

Devido a questões de segurança, as opções de hiperlink não são incluídas no conjunto de ícones de rich text apresentados aos membros por padrão. A habilidade para o mal é 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
};