Editor de texto enriquecido (WYSIWYG) en OpenProject

A partir de la versión 8.0.0, OpenProject cuenta con un editor cuasi-WYSIWYG, impulsado por CKSource CKEditor5. El formato subyacente es CommonMark al estilo de GitHub (GFM). Todos los contenidos anteriores basados en Textile se migrarán al actualizar a OpenProject 8.0.

Nota: En algunos recursos como los paquetes de trabajo o los comentarios, el editor no muestra todas las funcionalidades como las macros o la carga de imágenes. En la vista de pantalla dividida del paquete de trabajo (vista de detalles) es posible que tenga que utilizar los tres puntos verticales para acceder a funciones adicionales del editor.

Tema	Contenido
Formateo básico	Elementos básicos de formato en el editor WYSIWYG
Tratamiento de imágenes	Cómo añadir imágenes en el editor WYSIWYG.
Atajos de teclado	Trabajando con atajos de teclado en el editor WYSIWYG.
Macros	Macros disponibles en el editor WYSIWYG.
Enlaces a recursos OpenProject	Cómo enlazar con recursos como wikis, proyectos, reuniones.
Incrustación de atributos de paquetes de trabajo y atributos de proyecto	Cómo incrustar atributos y textos de ayuda.

Formato básico

El editor CKEditor5 incorporado en OpenProject admite estilos de texto básicos, como el formato de negrita y cursiva, encabezados tachado, código en línea y comillas, así como el manejo de imágenes en línea. También es posible pegar contenidos como imágenes o texto enriquecido, mientras que los estilos no admitidos los eliminará el editor.

Saltos de línea

En lugar de crear un nuevo párrafo con Intro, también puede pulsar MAYÚS+Intro para crear un salto de línea sin crear un nuevo párrafo.

Enlaces

Cree hiperenlaces pulsando la barra de herramientas (opcionalmente con algún texto seleccionado), o pulsando CTRL+k para abrir una ventana emergente en la que introducir el enlace.

Widgets y nuevas líneas

CKEditor utiliza widgets para mostrar elementos en bloque como imágenes, tablas y otros elementos que no están en línea. Puede seleccionar la mayoría de los widgets pulsando sobre él - La única excepción es el widget de tabla, que tiene un pequeño mando de selección en la parte superior izquierda para seleccionar toda la tabla.

Cuando tenga un widget seleccionado, podrá eliminarlo o cortarlo. Puede crear una nueva línea por debajo seleccionando el widget y pulsando INTRO o ↓ (FLECHA ABAJO), o una nueva línea por encima pulsando MAYÚS+Intro o ↑ (FLECHA ARRIBA). Esto es especialmente necesario cuando el widget es el primer o el último elemento de la página para insertar una línea debajo o encima de él.

Bloques de código

Como CKEditor5 actualmente no proporciona soporte para bloques de código, OpenProject puede mostrar, pero no editar bloques de código dentro de la instancia de CKEditor. Un bloque de código puede editarse a través de una ventana modal dentro de una instancia del editor CodeMirror. Esto tiene la ventaja de proporcionar resaltado de sintaxis y detección de código (para los idiomas admitidos).

Tablas

La extensión GFM de las especificaciones CommonMark añade una definición para la sintaxis de tablas que admite el CKEditor de OpenProject. Esta definición exige que todas las tablas tengan una fila de encabezado. Para las tablas creadas con CKEditor sin filas de encabezado, en su lugar se emite una tabla HTML. Esto coincide con el comportamiento de, por ejemplo, GitHub.

Autoformateo

CKEditor5 permite ciertas pulsaciones de teclado autoformateables similares a las de CommonMark:

• Cree estilos de negrita o cursiva escribiendo **pasará a estar en negrita**, _pasará a estar en cursiva_,
• Cree encabezados de diferente sangría con #, ##, ##, …
• Cree una lista con viñetas iniciando la línea con * o - y un espacio
• Cree una lista numerada comenzando la línea con 1. o 1) y un espacio

Tratamiento de imágenes

En los recursos compatibles de OpenProject en los que se permiten archivos adjuntos, puede añadir imágenes a la página de cualquiera de las siguientes formas

• utilizando el botón de la barra de herramientas,
• pegando una imagen del portapapeles,
• o arrastrando y soltando una imagen en el editor.

La imagen se cargará automáticamente y se guardará como archivo adjunto. Puede ajustar el tamaño de la imagen en el editor utilizando el ratón.

Atajos de teclado

CKEditor tiene una amplia variedad de atajos de teclado que puede utilizar. Puedes encontrar una lista de atajos documentados aquí: https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html.

Además, OpenProject añade el siguiente acceso directo:

Acceso directo (Windows / Linux)	Acceso directo (Mac)	Acción
CTRL + ENTRAR	CMD + ENTRAR	Guardar cambios. Para campos de edición in situ, guardar y cerrar el campo. Para páginas completas con WYSIWYG (reuniones, wiki), someter el formulario.

Macros

OpenProject ha soportado macros en páginas con formato Textile y sigue haciéndolo con el editor WYSIWYG. Tenga en cuenta que las macros no se expanden mientras edita la página, en su lugar se muestra un marcador de posición.

Puede encontrar las macros aquí en el editor de texto:

Índice

Si procede, la macro de tabla de contenidos (TOC) mostrará un listado de todos los títulos de la página actual.

Botón de paquete de trabajo

Configure un botón o un enlace para dirigirse a la pantalla de creación del paquete de trabajo en el proyecto actual. Puede preseleccionar el tipo de paquete de trabajo que debe seleccionarse, lo que facilita guiar a los usuarios al formulario de creación del paquete de trabajo.

Incluir página wiki

Incluya el contenido de una página wiki determinada en el proyecto actual, o en otro proyecto visible.

Incrustar tabla de paquetes de trabajo y diagrama de Gantt

Se trata de la macro más flexible que proporciona una amplia funcionalidad en lo que respecta a la inclusión de tablas de paquetes de trabajo dinámicos con todo el potencial de la tabla de paquetes de trabajo normal.

Al añadir una tabla de paquete de trabajo incrustada a través de la barra de herramientas, puede configurar la vista de la tabla (como las columnas, la agrupación, los filtros y otras propiedades) en una ventana emergente.

A continuación, la página renderizada obtendrá los resultados de la tabla de paquetes de trabajo de forma dinámica, respetando la visibilidad para cada usuario.

Utilícelo para incrustar vistas en otras páginas, crear informes de resultados múltiples o incrustar una vista de diagrama de Gantt.

Enlaces a recursos OpenProject

Al igual que con la sintaxis de formato Textile, puede enlazar a otros recursos dentro de OpenProject utilizando los mismos atajos que antes. Crear enlaces a:

• página wiki: [[Página wiki]]
• página wiki con nombre de enlace independiente: [[Página wiki|El texto del enlace]]
• página wiki del proyecto Sandbox: [[Sandbox:Página wiki]]
• paquete de trabajo con ID12: #12
• paquete de trabajo con ID 12 con asunto y tipo: ##12
• paquete de trabajo con ID 12 con asunto, tipo, estado y fechas: ###12
• versión por ID o nombre: versión#3, version:"Versión 1.0.0"
• proyecto por ID/nombre: proyecto#12 , project:"Nombre de mi proyecto"
• adjunto por nombre de archivo: attachment:nombrearchivo.zip
• reunión por ID/nombre: reunión#12 , meeting:"Nombre de mi reunión"
• documento por ID/nombre: documento#12 , document:"Nombre de mi documento"
• usuario por id o nombre de usuario: usuario#4 , user:"juanperez"
• un mensaje del foro por ID: mensaje#1218
• revisión del repositorio 43: r43
• commit por hash: commit:f30e13e4
• A un archivo fuente del repositorio: source:"algún/archivo"

Para evitar el procesamiento de estos elementos, precederlos de un carácter de exclamación ! por ejemplo, !#12 impedirá la vinculación a un paquete de trabajo con ID 12.

Por favor, tenga en cuenta: Todas estas macros deben escribirse como una palabra nueva (es decir, con al menos un espacio delante o al principio de un párrafo/frase). Las macros contenidas dentro de una palabra como algoquever#4 no se analizarán.

Autocompletado para paquetes de trabajo y usuarios

Para los paquetes de trabajo y los usuarios, si escribe # o @ se abrirá un autocompletador para los paquetes de trabajo y los usuarios visibles, respectivamente.

Incrustación de atributos de paquetes de trabajo y atributos de proyecto

Puede incrustar atributos específicos de paquetes de trabajo o proyectos utilizando una sintaxis determinada. Ejemplos:

• Enlace al asunto del paquete de trabajo con id #1234: workPackageLabel:1234:subject (esto también funciona para otros atributos. Véase la tabla siguiente).
• Enlace al estado del proyecto actual: projectValue:status
• Enlace al asunto del paquete de trabajo con asunto «Inicio del proyecto»: workPackageValue:"Inicio del proyecto":subject

Nota: Al hacer referencia a un paquete de trabajo por tema solo se buscan paquetes de trabajo con ese tema determinado en el proyecto actual (si lo hay). Si necesita hacer referencias cruzadas entre paquetes de trabajo, utilice su ID para localizar el paquete de trabajo al que desea hacer referencia.

Incrustación de textos de ayuda de atributos

También puede incrustar valores de atributos y sus textos de ayuda utilizando workPackageLabel en lugar de: workPackageLabel:1234:status que mostraría la etiqueta traducida para “Estado” y (si existe), el texto de ayuda correspondiente a la misma.

Nota: Estas macros solo se expandirán en el frontend. Para cada usuario individual, se comprobarán los permisos correctos y la macro dará lugar a un error si el usuario no está autorizado a ver el recurso correspondiente.

Atributos

Las listas siguientes muestran los atributos soportados para los paquetes de trabajo y los proyectos.

Nota: Si utiliza un idioma distinto al inglés, en el editor de texto solo se podrá utilizar una traducción de los comandos si el idioma para todos los usuarios de una instancia es el mismo (por ejemplo, alemán). En este caso, solo se traduce el atributo al que se refiere el comando, por ejemplo (workPackageValue:1234:"atributo traducido"). No recomendamos utilizar atributos traducidos, ya que podrían fallar en futuras versiones debido a correcciones o cambios en los textos.

Atributos disponibles para los paquetes de trabajo

La siguiente lista contiene todos los nombres de atributos admitidos para las macros workPackageValue y workPackageLabel, donde 1234 representa el ID del paquete de trabajo.

Atributo	Ejemplo de uso
Campos personalizados	workPackageValue:1234:"Nombre del campo personalizado del paquete de trabajo"
Asignado a	workPackageValue:1234:assignee
Autor	workPackageValue:1234:author
Categoría	workPackageValue:1234:category
Fecha de creación	workPackageValue:1234:createdAt
Descripción	workPackageValue:1234:description
Tiempo estimado	workPackageValue:1234:estimatedTime
Fecha de finalización	workPackageValue:1234:dueDate
Paquete de trabajo principal	workPackageValue:1234:parent
Prioridad	workPackageValue:1234:priority
Proyecto	workPackageValue:1234:project
Horas restantes	workPackageValue:1234:remainingTime (sic!)
Usuario responsable	workPackageValue:1234:responsible
Tiempo invertido	workPackageValue:1234:spentTime
Fecha de inicio	workPackageValue:1234:startDate
Estado	workPackageValue:1234:status
Asunto / Título	workPackageValue:1234:subject
Tipo de paquete de trabajo	workPackageValue:1234:type
Fecha de la última actualización	workPackageValue:1234:updatedAt
Version	workPackageValue:1234:version

Atributos disponibles para los proyectos

La siguiente lista contiene todos los nombres de atributos admitidos en las macros projectValue y projectLabel. Todos los ejemplos muestran referencias al proyecto actual en el que se renderiza el documento. También pueden hacer referencia a otro proyecto con projectValue:"Identificador del proyecto":attribute.

Atributo	Ejemplo de uso
Campos personalizados	projectValue:"Nombre del campo personalizado del proyecto"
¿Proyecto activo? (booleano)	projectValue:active
Descripción	projectValue:description
Identificador del proyecto	projectValue:identifier
Nombre del proyecto	projectValue:name
Estado	projectValue:status
Descripción del estado	projectValue:statusExplanation
Proyecto padre	projectValue:parent
¿Proyecto público? (booleano)	projectValue:public