Elementos básicos del editor de texto enriquecido rich-text-editor-essentials

Información general overview

Un editor de texto enriquecido (RTE) permite introducir texto con marcado.

Para los componentes de Communities, aunque es similar al editor de texto enriquecido del entorno de creación, afecta al texto introducido en el entorno de publicación.

Habilitar el editor de texto enriquecido enabling-rich-text-editor

Los componentes de las comunidades que permiten contenido generado por el usuario (UGC) se pueden habilitar para permitir RTE. Si el componente se agregó a una página o se incluyó dentro de una función, RTE puede estar habilitado o no de manera predeterminada.

Si no está habilitado, simplemente ingrese modo de edición de autor, seleccione el componente para editarlo y marque la casilla de verificación Rich Text Editor.

RTE está disponible para los siguientes componentes de Communities:

Personalización customization

La personalización del editor de texto enriquecido es posible porque la implementación se basa en CKEditor.

La configuración actual de los componentes de Communities se encuentra en cq.social. scf clientlib, en el repositorio en

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

No se recomienda modificar cq.social.scf clientlib, ya que las futuras actualizaciones pueden anular las ediciones.

Personalización de ejemplo: Vínculos en línea example-customization-inline-links

Por motivos de seguridad, las opciones de hipervínculos no se incluyen en el conjunto de iconos de texto enriquecido que se presentan a los miembros de forma predeterminada. La capacidad para la travesura es extensa cuando se permiten hrefs en UGC.

Para agregar las opciones de hipervínculo a la barra de herramientas:

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