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:
- Adicionar uma barra de ferramentas chamada "
links
"{ name: 'links', items: [ 'Link','Unlink','Anchor' ] }
- Selecionar Salvar tudo
/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
};