Ejercicio: Inserción y reemplazo de imágenes, HTML y tablas

  • 21 minutos

En este ejercicio, agregará texto dentro y fuera de los rangos de texto seleccionados y reemplazará el texto de un rango seleccionado. También aprenderá a insertar imágenes, HTML y tablas en el documento.

Importante

En este ejercicio se presupone que ha creado el complemento de Word en el ejercicio anterior de este módulo.

Agregar texto dentro de un rango

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón change-font y agregue el marcado siguiente después de esa línea:

    <button class="ms-Button" id="insert-text-into-range">Insert Abbreviation</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("change-font").onclick = changeFont;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("insert-text-into-range").onclick = insertTextIntoRange;

  5. Agregue la función siguiente al final del archivo:

    async function insertTextIntoRange() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to insert text into a selected range.

    // TODO2: Load the text of the range and sync so that the
    //        current range text can be read.

    // TODO3: Queue commands to repeat the text of the original
    //        range at the end of the document.

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  6. En la función insertTextIntoRange(), reemplace TODO1 con el código siguiente:

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText(" (C2R)", "End");

    Nota:

    • El método está diseñado para insertar la abreviatura ["(C2R)"] al final del rango cuyo texto es "Click-to-Run". Presupone, para simplificar, que existe la cadena y el usuario la ha seleccionado.
    • El primer parámetro del método Range.insertText es la cadena que se insertará en el objeto Range.
    • El segundo parámetro especifica en qué lugar del rango se debe insertar el texto adicional. Además de "End", otras posibles opciones son "Start", "Before", "After" y "Replace".
    • La diferencia entre "End" y "After" es que "End" inserta el nuevo texto al final del rango existente, pero "After" crea un rango con la cadena e inserta el nuevo rango después del existente. De forma similar, "Start" inserta el texto al principio del rango actual y "Before" inserta un nuevo rango. "Replace" reemplaza el texto del rango existente por la cadena en el primer parámetro.
    • En una fase anterior del tutorial vio que los métodos insert* del objeto body no tienen las opciones "Before" y "After". Esto se debe a que no puede poner contenido fuera del cuerpo del documento.

  7. Omitiremos TODO2 hasta la siguiente sección.

    En la función insertTextIntoRange(), reemplace TODO3 con el siguiente código. Este código es similar al que creó en la primera fase del tutorial, excepto que ahora inserta un nuevo párrafo al final del documento en lugar de al principio. Este nuevo párrafo demostrará que el nuevo texto forma ahora parte del rango original.

    doc.body.insertParagraph("Original range: " + originalRange.text, "End");

Agregue código para recuperar las propiedades del documento en los objetos del script del panel de tareas

En todas las funciones anteriores en este módulo, puso en cola los comandos para escribir en el documento de Office. Cada función finalizó con una llamada al método context.sync() que envía los comandos puestos en cola al documento para su ejecución.

Pero el código que agregó en el último paso llama a la propiedad originalRange.text, que se trata de una diferencia significante con respecto a las funciones anteriores que escribió, porque el objeto originalRange solo es un proxy que existe en el script del panel tareas. No sabe cuál es el texto real del rango del documento, así que su propiedad text no puede tener un valor real.

Es necesario capturar primero el valor del texto del rango del documento y usarlo para establecer el valor de originalRange.text. Solo en ese momento se puede llamar a originalRange.text sin que se produzca una excepción.

Este proceso de obtención consta de tres pasos:

  1. Ponga a la cola un comando para cargar (es decir, obtener) las propiedades que el código necesita leer.
  2. Llame al método sync() del objeto de contexto para enviar el comando en cola al documento para la ejecución y devolución de la información solicitada.
  3. Como el método sync() es asincrónico, asegúrese de que ha finalizado antes de que el código llame a las propiedades que se obtuvieron.

Estos pasos deben completarse cuando el código necesite leer información del documento de Office.

  1. En la función insertTextIntoRange(), reemplace TODO2 con el siguiente código.

    originalRange.load("text");
await context.sync();

// TODO4: Move the doc.body.insertParagraph line here.

// TODO5: Move the final call of context.sync here and ensure
//        that it doesn't run until the insertParagraph has
//        been queued.

  2. Mueva la línea de doc.body.insertParagraph y péguela en el lugar de TODO4.

Cuando haya terminado, la función insertTextIntoRange() completa debería parecerse a la siguiente:

async function insertTextIntoRange() {
  await Word.run(async (context) => {
    const doc = context.document;
    const originalRange = doc.getSelection();
    originalRange.insertText(" (C2R)", "End");

    originalRange.load("text");
    await context.sync();

    doc.body.insertParagraph("Current text of original range: " + originalRange.text, "End");

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

Agregar texto entre rangos

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón insert-text-into-range y agregue la siguiente revisión después de esa línea:

    <button class="ms-Button" id="insert-text-outside-range">Add Version Info</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("insert-text-into-range").onclick = insertTextIntoRange;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("insert-text-outside-range").onclick = insertTextBeforeRange;

  5. Agregue la función siguiente al final del archivo:

    async function insertTextBeforeRange() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to insert a new range before the
    //        selected range.

    // TODO2: Load the text of the original range and sync so that the
    //        range text can be read and inserted.
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  6. En la función insertTextBeforeRange(), reemplace TODO1 con el código siguiente:

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText("Office 2019, ", "Before");

    Nota:

    • El método está diseñado para agregar un intervalo cuyo texto es "Office 2019", antes del intervalo con el texto "Microsoft 365". Presupone, para simplificar, que existe la cadena y el usuario la ha seleccionado.
    • El primer parámetro del método Range.insertText() es la cadena que se agregará.
    • El segundo parámetro especifica en qué lugar del rango se debe insertar el texto adicional. Para más información sobre las opciones de ubicación, consulte la discusión anterior de la función insertTextIntoRange().

  7. En la función insertTextBeforeRange(), reemplace TODO2 con el siguiente código.

    originalRange.load("text");
await context.sync();

// TODO3: Queue commands to insert the original range as a
//        paragraph at the end of the document.

// TODO4: Make a final call of context.sync here and ensure
//        that it doesn't run until the insertParagraph has
//        been queued.

  8. Reemplace TODO3 por el código siguiente. Este nuevo párrafo demostrará el hecho de que el nuevo texto no forma parte del rango original seleccionado. El rango original sigue teniendo solo el texto que tenía cuando se seleccionó.

    doc.body.insertParagraph("Current text of original range: " + originalRange.text, "End");

  9. Reemplace TODO4 por el código siguiente:

    await context.sync();

Reemplazar el texto de un rango

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón insert-text-outside-range y agregue la siguiente revisión después de esa línea:

    <button class="ms-Button" id="replace-text">Change Quantity Term</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("insert-text-outside-range").onclick = insertTextBeforeRange;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("replace-text").onclick = replaceText;

  5. Agregue la siguiente función al final del archivo:

    async function replaceText() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to replace the text.

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  6. En la función replaceText(), reemplace TODO1 con el siguiente código. Este método está diseñado para reemplazar la cadena "several" por la cadena "many". Presupone, para simplificar, que existe la cadena y el usuario la ha seleccionado.

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText("many", "Replace");

  7. Compruebe que guardó todos los cambios que realizó en el proyecto.

Probar el complemento

  1. Repita los pasos del ejercicio anterior para transferir localmente el complemento.
  2. Si el panel de tareas del complemento aún no está abierto en Word, vaya a la pestaña Inicio y seleccione el botón Mostrar panel de tareas en la cinta de opciones para abrirlo.
  3. En el panel de tareas, seleccione el botón Insertar párrafo para asegurarse de que hay un párrafo al principio del documento.
  4. En el documento, seleccione la frase "hacer clic y ejecutar". Tenga cuidado de no incluir el espacio anterior o la coma siguiente en la selección.
  5. Seleccione el botón Insertar abreviatura. Fíjese en que se agrega "(C2R)". Fíjese también en que en la parte inferior del documento se agrega un nuevo párrafo con todo el texto expandido porque se ha agregado la nueva cadena al rango existente.
  6. En el documento, seleccione la frase "Microsoft 365". Tenga cuidado de no incluir el espacio anterior o siguiente en la selección.
  7. Seleccione el botón Agregar información de versión. Fíjese en que "Office 2019, " se inserta entre "Office 2016" y "Microsoft 365". Fíjese también en que en la parte inferior del documento se agrega un nuevo párrafo, pero contiene solo el texto seleccionado originalmente porque la nueva cadena se ha convertido en un nuevo rango en lugar de agregarse al rango original.
  8. En el documento, seleccione la palabra "varios". Tenga cuidado de no incluir el espacio anterior o siguiente en la selección.
  9. Seleccione el botón Cambiar término de cantidad. Fíjese en que "many" reemplaza el texto seleccionado.

Captura de pantalla del texto agregado y reemplazado por el tutorial en Word.

Insertar imágenes, HTML y tablas

En este paso del tutorial, aprenderá a insertar imágenes, HTML y tablas en el documento.

Definir una imagen

Siga los pasos que se indican a continuación para definir la imagen que insertará en el documento en la siguiente parte de este tutorial.

  1. En la raíz del proyecto, cree un nuevo archivo llamado ./src/taskpane/base64Image.js.

  2. Abra el archivo base64Image.js y agregue el código siguiente para especificar la cadena codificada en base 64 que representa una imagen.

    export const base64Image =
    "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";

Inserción de una imagen

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón replace-text y agregue el marcado siguiente después de esa línea:

    <button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. Localice la llamada al método Office.onReady() cerca de la parte superior del archivo y agregue el siguiente código inmediatamente antes de esa línea. Este código importa la variable que definió previamente en el archivo base64Image.js.

    import { base64Image } from "./base64Image";

  5. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("replace-text").onclick = replaceText;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("insert-image").onclick = insertImage;

  6. Agregue la siguiente función al final del archivo:

    async function insertImage() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to insert an image.

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  7. En la función insertImage(), reemplace TODO1 con el siguiente código. Esta línea inserta la imagen codificada en base 64 al final del documento. (El Paragraph objeto también tiene un insertInlinePictureFromBase64() método y otros insert* métodos. Consulte la siguiente sección insertHTML para obtener un ejemplo).

    context.document.body.insertInlinePictureFromBase64(base64Image, "End");

Insertar HTML

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón insert-image y agregue la siguiente revisión después de esa línea:

    <button class="ms-Button" id="insert-html">Insert HTML</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("insert-image").onclick = insertImage;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("insert-html").onclick = insertHTML;

  5. Agregue la siguiente función al final del archivo:

    async function insertHTML() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to insert a string of HTML.

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  6. En la función insertHTML(), reemplace TODO1 con el código siguiente:

    const blankParagraph = context.document.body.paragraphs.getLast().insertParagraph("", "After");
blankParagraph.insertHtml('<p style="font-family: verdana;">Inserted HTML.</p><p>Another paragraph</p>', "End");

    Nota:

    • La primera línea agrega un párrafo en blanco al final del documento.
    • La segunda línea inserta una cadena de HTML al final del párrafo; en concreto, dos párrafos, uno con formato de fuente Verdana y el otro con el estilo predeterminado del documento de Word. (Como ha visto antes en el método insertImage(), el objeto context.document.body también tiene los métodos insert*).

Insertar una tabla

  1. Abra el archivo ./src/taskpane/taskpane.html.

  2. Busque el elemento <button> para el botón insert-html y agregue la siguiente revisión después de esa línea:

    <button class="ms-Button" id="insert-table">Insert Table</button><br/><br/>

  3. Abra el archivo ./src/taskpane/taskpane.js.

  4. En la llamada al método Office.onReady(), busque la línea siguiente en el método Office.onReady():

    document.getElementById("insert-html").onclick = insertHTML;

    Agregue el código siguiente inmediatamente después de esa línea:

    document.getElementById("insert-table").onclick = insertTable;

  5. Agregue la siguiente función al final del archivo:

    async function insertTable() {
  await Word.run(async (context) => {
    // TODO1: Queue commands to get a reference to the paragraph
    //        that will proceed the table.

    // TODO2: Queue commands to create a table and populate it with data.

    await context.sync();
  })
  .catch(function (error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
  });
}

  6. En la función insertTable(), reemplace TODO1 con el siguiente código. Esta línea usa el ParagraphCollection.getFirst() método para obtener una referencia al primer párrafo y, a continuación, usa el Paragraph.getNext() método para obtener una referencia al segundo párrafo.

    const secondParagraph = context.document.body.paragraphs.getFirst().getNext();

  7. En la función insertTable(), reemplace TODO2 con el código siguiente:

    const tableData = [
    ["Name", "ID", "Birth City"],
    ["Bob", "434", "Chicago"],
    ["Sue", "719", "Havana"],
];
secondParagraph.insertTable(3, 3, "After", tableData);

    Nota:

    • Los dos primeros parámetros del método insertTable() especifican el número de filas y columnas.
    • El tercer parámetro especifica dónde se debe insertar la tabla, en este caso, después del párrafo.
    • El cuarto parámetro es una matriz bidimensional que establece los valores de las celdas de la tabla.
    • La tabla tendrá el estilo normal predeterminado, pero el método insertTable() devuelve un objeto Table con muchos miembros, algunos de los cuales se usan para aplicar un estilo a la tabla.

  8. Compruebe que guardó todos los cambios que realizó en el proyecto.

Probar el complemento

  1. Repita los pasos del ejercicio anterior para transferir localmente el complemento.
  2. Si el panel de tareas del complemento aún no está abierto en Word, vaya a la pestaña Inicio y seleccione el botón Mostrar panel de tareas en la cinta de opciones para abrirlo.
  3. En el panel de tareas, elija el botón Insertar párrafo al menos tres veces para asegurarse de que hay algunos párrafos en el documento.
  4. Elija el botón Insertar imagen y fíjese en que se inserta una imagen al final del documento.
  5. Elija el botón Insertar HTML y fíjese en que se insertan dos párrafos al final del documento, y que el primero tiene la fuente Verdana.
  6. Elija el botón Insertar tabla y fíjese en que se inserta una tabla después del segundo párrafo.

Captura de pantalla de una imagen, HTML y una tabla insertada por el tutorial en Word.

Resumen

En este ejercicio, ha actualizado el complemento que creó en un ejercicio anterior para agregar imágenes, HTML y tablas a un documento de Word. También ha aprendido a insertar imágenes, HTML y tablas en el documento.

Comprobar sus conocimientos

1.

¿Cuál de las siguientes opciones devolverá el intervalo de texto seleccionado en el documento actual?

2.

¿Cuál de las siguientes opciones insertará una nueva imagen de una cadena de base 64 al final de un documento de Word?