Campos de texto enriquecido en la API de Adobe Workfront
Algunos objetos de Adobe Workfront permiten almacenar texto con formato de texto enriquecido. En la API de Workfront, el texto enriquecido se almacena como JSON mediante el marco de código abierto Draft.js.
Ejemplo de descripción general
Un campo personalizado con formato de texto enriquecido se denomina Campo con texto enriquecido y puede tener asociados los siguientes valores:
Ejemplo: Una solicitud de GET básica para recuperar el valor del campo de formulario personalizado Campo con texto enriquecido:
<OBJ Code><OBJ ID><OBJ Code><OBJ ID>
Ejemplo: Esta solicitud devolverá el valor de Campo con texto enriquecido en JSON almacenado en parameterValue DE:Campo con texto enriquecido
{
data: {
ID: "5e85e3f10000b99e8cef10af4e5c6c7b",
name: "Zoom Integration Test",
objCode: "PROJ",
parameterValues: {
"DE:Field with rich text": "{"blocks":[{"key":"dpfce","text":"This is a regular text","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"a9ic6","text":"Bold text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":9,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"1b2a4","text":"Italic text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"4dle1","text":"Underline text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":14,"style":"UNDERLINE"}],"entityRanges":[],"data":{}},{"key":"10mip","text":"With all formating and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":18,"style":"BOLD"},{"offset":0,"length":18,"style":"ITALIC"},{"offset":0,"length":18,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}",
"DE:Other Type of Field": "Value",
}
}
}
Ejemplo: Esta es una versión con formato de la respuesta que aparece en la figura anterior
{
"blocks":[
{
"key":"dpfce",
"text":"This is a regular text",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
],
"entityRanges":[
],
"data":{
}
},
{
"key":"a9ic6",
"text":"Bold text and regular text",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
{
"offset":0,
"length":9,
"style":"BOLD"
}
],
"entityRanges":[
],
"data":{
}
},
{
"key":"1b2a4",
"text":"Italic text and regular text",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
{
"offset":0,
"length":11,
"style":"ITALIC"
}
],
"entityRanges":[
],
"data":{
}
},
{
"key":"4dle1",
"text":"Underline text and regular text",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
{
"offset":0,
"length":14,
"style":"UNDERLINE"
}
],
"entityRanges":[
],
"data":{
}
},
{
"key":"10mip",
"text":"With all formating and regular text",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
{
"offset":0,
"length":18,
"style":"BOLD"
},
{
"offset":0,
"length":18,
"style":"ITALIC"
},
{
"offset":0,
"length":18,
"style":"UNDERLINE"
}
],
"entityRanges":[
],
"data":{
}
}
],
"entityMap":{
}
}
Bloques
Los objetos JSON que almacenan el contenido de texto enriquecido están compuestos de dos partes principales: bloques y entityMaps.
Un bloque es un objeto JSON que representa una sola línea de texto con formato. Dado que un solo campo personalizado puede tener más de una línea de texto, cada línea de texto tiene su propio bloque y cada bloque se representa como un elemento en una matriz principal denominada blocks.
Ejemplo: Aquí, cada línea de texto de un campo personalizado se asigna a un elemento de bloque en los bloques de matriz
Dado que cada elemento de bloque también es un objeto JSON, cada bloque está compuesto por los elementos: key, text, type, depth, inlineStyleRanges, entityRanges y data. Cada uno de estos elementos funciona de la siguiente manera:
- Key es el identificador único de ese bloque. La clave se utiliza para asignar una línea de texto a través de entityMaps. Puede encontrar más información sobre entityMaps en la sección entityMaps de este documento.
- Texto es la línea de contenido de texto que se está almacenando desde el campo personalizado.
- Tipo describe el tipo de texto que se representa. Por ejemplo, una línea de texto almacenada en un bloque podría ser parte de una lista. Si esa línea de texto formaba parte de una lista sin ordenar, su tipo se definiría como: unordered-list-item.
- Actualmente, las listas no son compatibles, pero deberían estar disponibles próximamente.
- Profundidad: este parámetro define la profundidad de la línea cuando esta es una parte anidada de una lista ordenada o sin ordenar.
- inlineStyleRanges es una matriz que describe los tipos de formato que se aplicaron a la línea de texto representada por el bloque actual.
Ejemplo: Esta es una matriz inlineStyleRanges que describe cada estilo en el nivel de caracteres. En este caso: se ha aplicado el estilo Bold a los 9 caracteres (longitud: 9) a partir del índice 0 (desplazamiento: 0).
En caso de que se hayan aplicado varios tipos de formato a una sola línea, los estilos se asignarán a elementos adicionales de la matriz inlineStyleRanges.
Ejemplo: Este es el aspecto que tendría un bloque al almacenar una línea de texto que contiene el formato mixto: Texto en negrita y cursiva
{
"key":"a9ic6",
"text":"Bold text and Italics",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
{
"offset":0,
"length":21,
"style":"BOLD"
},
{
"offset":14,
"length":7,
"style":"ITALIC"
}
],
...
},
entityMaps y entityRanges
Un bloque de datos puede contener entidades como hipervínculos u otros tipos de formato estilizado conectados a fuentes de datos ubicadas fuera del campo de texto personalizado.
Ejemplos
Recuperando texto sin formato de JSON
Cuando se envía un campo personalizado con formato de texto enriquecido, todo el texto se almacena en la matriz bloques. Sin embargo, cada línea del texto completo se almacena en el parámetro de texto dentro de cada uno de los elementos de bloque independientes que conforman la matriz principal blocks. Por lo tanto, para recuperar el texto completo, es necesario extraer y volver a unir cada línea de texto independiente. Esto se puede lograr recorriendo en bucle todos los elementos de los bloques y concatenando cada parámetro de texto con un delimitador de línea (\n).
Ejemplo: Este es el aspecto que podría tener el JS:
const parameterValue = JSON.parse('{"blocks":[{"key":"dpfce","text":"This is a regular text","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"a9ic6","text":"Bold text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":9,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"1b2a4","text":"Italic text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"4dle1","text":"Underline text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":14,"style":"UNDERLINE"}],"entityRanges":[],"data":{}},{"key":"10mip","text":"With all formating and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":18,"style":"BOLD"},{"offset":0,"length":18,"style":"ITALIC"},{"offset":0,"length":18,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}');
let plainText = "";
parameterValue.blocks.forEach((block) => {
plainText = plainText.concat(block.text, "\n");
})
console.log(plainText)
Guardar un valor de campo de texto enriquecido mediante la API de Workfront
Para guardar los siguientes valores de un campo de texto enriquecido mediante la API de Workfront:
Hola Mundo!!!
Este es mi primer texto enriquecido
-
Construya un archivo JSON que represente el valor del campo de texto enriquecido que está intentando capturar organizando cada línea de texto en un elemento de bloque, en la matriz blocks
code language-none { "blocks":[ { "key":"0", "text":"Hello World!!!", }, { "key":"1", "text":"This is my first Rich Text", } ] } -
Capturar el formato de texto enriquecido mediante el parámetro inlineStyleRanges
code language-none { "blocks":[ { "key":"0", "text":"Hello World!!!", "inlineStyleRanges": [ { "offset":6, "length":11, "style":"BOLD" } ] }, { "key":"1", "text":"This is my first Rich Text", } ] } -
Para capturar la segunda línea, el texto "Texto enriquecido" debe tener formato de negrita y cursiva.
code language-none { "blocks":[ { "key":"0", "text":"Hello World!!!", "inlineStyleRanges": [ { "offset":6, "length":11, "style":"BOLD" } ] }, { "key":"1", "text":"This is my first Rich Text", "inlineStyleRanges": [ { "offset":17, "length":26, "style":"BOLD" }, { "offset":17, "length":26, "style":"ITALIC" } ] } ], "entityMap":{ } }note note NOTE Aunque la funcionalidad entityMap no se admite durante la versión inicial, sigue siendo un campo obligatorio para pasar este JSON en una solicitud -
Utilice el método stringify en el archivo JSON descrito anteriormente para realizar una solicitud de PUT y enviar actualizaciones
<OBJ Code><OBJ ID>