Editor de texto enriquecido (WYSIWYG) en OpenProject

OpenProject cuenta con un editor cuasi-WYSIWYG, basado en CKSource CKEditor5. El formato subyacente es CommonMark con sabor a GitHub (GFM) con HTML adicional para, por ejemplo, las menciones y el tamaño de las imágenes.

Nota

En algunos recursos, como los paquetes de trabajo o los comentarios, el editor no muestra todas las funciones, 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 y reuniones.
Incrustación de atributos de paquetes de trabajo y atributos de proyecto	Cómo incrustar atributos y textos de ayuda.

Formato básico

La compilación CKEditor5 de 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 ellos. 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 el 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 se 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:

Enlace objetivo	Ejemplo de uso
Página wiki	[[Página Wiki]]
Página wiki con nombre de enlace independiente	[[Página wiki|El texto del enlace]]
Página wiki en el 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:"Lanzamiento 1.0.0"
Proyecto por ID/nombre	proyecto#12 , project:"Nombre de mi proyecto"
Adjuntar por nombre de archivo	attachment:nombrearchivo.zip
Reunión por ID/nombre	reunión#12 , meeting:"Mi nombre de reunión"
Documento por ID/nombre	documento#12 , document:"Nombre de mi documento"
Usuario por ID o inicio de sesión	usuario#4 , user:"juanperez"
Mensaje del foro por ID	mensaje#1218
Revisión del repositorio 43	r43
Commit por hash	commit:f30e13e4
Archivo fuente en el repositorio	source:"some/file"

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.

Nota

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.

Consejo

Para más información sobre cómo usar macros echa un vistazo a este artículo del blog.

Autocompletado para paquetes de trabajo y usuarios

Para los paquetes de trabajo y los usuarios, al teclear # o @ se abrirá un desplegable de autocompletar para los paquetes de trabajo y los usuarios visibles, respectivamente.

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

Nota

Estas macros solo se expandirán en el frontend. Para cada usuario individual, se comprobarán los permisos correctos y la macro producirá un error si el usuario no tiene permiso para ver el recurso correspondiente.

Incrustación del valor de un paquete de trabajo por el ID del paquete de trabajo

Utilice las macros workPackageValue:ID:attribute para incrustar atributos de un paquete de trabajo por su ID del paquete de trabajo. Consulte la tabla siguiente para conocer los atributos disponibles.

Ejemplo:

Enlace al asunto del paquete de trabajo con ID #1234: workPackageValue:1234:asunto

Incrustación del valor de un paquete de trabajo por tema del paquete de trabajo

Utilice las macros workPackageValue:"Nombre del proyecto":atributo para incrustar atributos de un paquete de trabajo por su asunto. Consulte la tabla siguiente para conocer los atributos disponibles.

Ejemplo:

Enlace al asignatario del paquete de trabajo con asunto “Inicio del proyecto”: workPackageValue:"Inicio del proyecto":asignado

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. Desaconsejamos el uso de materias como referencia, ya que no se actualizan cuando cambia la materia referenciada.

Incrustación relativa del valor de un paquete de trabajo

Utilice las macros workPackageValue:attribute para incrustar atributos del paquete de trabajo actual.

Si está editando la descripción de un paquete de trabajo o un campo personalizado de texto enriquecido perteneciente a un paquete de trabajo, puede omitir el ID si desea hacer referencia al mismo. Debe incluir el ID del paquete de trabajo si está editando, por ejemplo, una página wiki o la descripción de una reunión. Consulte la tabla siguiente para conocer los atributos disponibles.

Ejemplo:

Enlace a la persona asignada del paquete de trabajo actual: workPackageValue:asignado

Incrustación de un valor de proyecto por ID de proyecto

Utilice las macros projectValue:ID:attribute para incrustar atributos de un proyecto por su ID de proyecto. Consulte la tabla siguiente para conocer los atributos disponibles.

Ejemplo:

Enlace al estado del proyecto con el ID 1234: projectValue:1234:status

Incrustación relativa de un valor de proyecto

Utilice las macros projectValue:attribute para incrustar atributos del proyecto actual. Consulte la tabla siguiente para conocer los atributos disponibles.

Ejemplo:

Enlace al estado del proyecto actual: projectValue:status

Incrustación de textos de ayuda de atributos

También puede incrustar valores de atributos y sus textos de ayuda utilizando workPackageLabel o projectLabel. Por ejemplo, workPackageLabel:1234:status mostraría la etiqueta traducida de «Status» y (si existe), el texto de ayuda 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
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

Nota

No se admite la incrustación recursiva de texto enriquecido. Por ejemplo, no puede incrustar la descripción de un paquete de trabajo en sí misma con workPackageValue:description.

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