Editor de texto enriquecido (WYSIWYG) en OpenProject
OpenProject features a quasi-WYSIWYG editor, powered by CKSource CKEditor5. The underlying format is GitHub-flavored CommonMark (GFM) with additional HTML for e.g. mentions and image sizing.
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. In the work package split screen view (details view), you may have to use the three vertical dots to access additional features of the 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 | How to link to resources like wikis, projects and meetings. |
| Incrustación de atributos de paquetes de trabajo y atributos de proyecto | Cómo incrustar atributos y textos de ayuda. |
Formato básico
The CKEditor5 build in OpenProject supports basic text styles, such as bold and italic formatting, headings, strike-through, inline code, and quotes, as well as inline image handling. 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. You can select most widgets by pressing on them - The only exception to that is the table widget, it has a little select knob at the top left to select the entire table.
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
The GFM extension of the CommonMark specs adds a definition for table syntax, which the CKEditor of OpenProject supports. 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.o1)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. Note that macros are not expanded while editing the page, instead, a placeholder is shown.
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:
| Link target | Ejemplo de uso |
|---|---|
| Página wiki | [[Wiki page]] |
| Wiki page with separate link name | [[Wiki page\|The text of the link]] |
| Wiki page in the Sandbox project | [[Sandbox:Wiki page]] |
| Work package with ID12 | #12 |
| Work package with ID 12 with subject and type | ##12 |
| Work package with ID 12 with subject, type, status, and dates | ###12 |
| Version by ID or name | version#3, version:"Release 1.0.0" |
| Project by ID/name | project#12 , project:"My project name" |
| Attachment by filename | attachment:filename.zip |
| Meeting by ID/name | meeting#12 , meeting:"My meeting name" |
| Document by ID/name | document#12 , document:"My document name" |
| User by ID or login | user#4 , user:"johndoe" |
| Forum message by ID | message#1218 |
| Repository revision 43 | r43 |
| Commit by hash | commit:f30e13e4 |
| Source file in the repository | 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#4no 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
For work packages and users, typing # or @ will open an autocomplete dropdown for visible work packages and users, respectively.
Incrustación de atributos de paquetes de trabajo y atributos de proyecto
Nota
Estas macros solo se expandirán en el frontend. For each individual user, the correct permissions will be checked and the macro will result in an error if the user is not allowed to view the respective resource.
Embedding of a work package value by work package ID
Use the workPackageValue:ID:attribute macros to embed attributes of a work package by its work package ID. See the table below for available attributes.
Ejemplo:
Linking to the subject of work package with ID #1234: workPackageValue:1234:subject
Embedding of a work package value by work package subject
Use the workPackageValue:"Project name":attribute macros to embed attributes of a work package by its subject. See the table below for available attributes.
Ejemplo:
Linking to the assignee of work package with subject “Project start”: workPackageValue:"Project start":assignee
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. We recommend against using subjects as references, as they are not updated when the referenced subject changes.
Relative embedding of a work package value
Use the workPackageValue:attribute macros to embed attributes of the current work package.
If you are editing a work package description or a rich text custom field belonging to a work package you can omit the ID if you want to reference it. You must include the work package ID if you are editing e.g. a wiki page or a meeting description. See the table below for available attributes.
Ejemplo:
Linking to the assigned person of the current work package: workPackageValue:assignee
Embedding of a project value by project ID
Use the projectValue:ID:attribute macros to embed attributes of a project by its project ID. See the table below for available attributes.
Ejemplo:
Linking to the project’s status with the ID 1234: projectValue:1234:status
Relative embedding of a project value
Use the projectValue:attribute macros to embed attributes of the current project. See the table below for available attributes.
Ejemplo:
Enlace al estado del proyecto actual: projectValue:status
Incrustación de textos de ayuda de atributos
You can also embed attribute values and their help texts by using workPackageLabel or projectLabel. For exampleworkPackageLabel:1234:status would output the translated label for “Status” and (if exists), the corresponding help text for it.
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
The following list contains all supported attribute names for the workPackageValue and workPackageLabel macros, where 1234 stands for the work package ID.
| 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
Recursive embedding of rich text is not supported. For example, you cannot embed a work package description in itself with
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 |
