API de portapapeles en ElectronJS

Posted on by Rudeus Greyrat

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML , CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

A veces, a los desarrolladores les gustaría un control más granular sobre el comportamiento básico del sistema, como las operaciones de copiar y pegar. Electron nos proporciona acceso al Portapapeles del sistema utilizando el módulo de portapapeles incorporado para este mismo propósito. Usando el módulo del portapapeles , los desarrolladores pueden proporcionar la funcionalidad de copiar y pegar para diferentes formatos, como un archivo de imagen , texto sin formato , marcado HTML , etc., utilizando los diferentes métodos de instancia de este módulo. Este tutorial demostrará las diferentes operaciones compatibles con la API del Portapapeles en Electron.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

  • Estructura del proyecto:
    Project Structure

API del portapapeles en Electron: el módulo del portapapeles se utiliza para realizar operaciones de copiar y pegar en el portapapeles del sistema. El portapapeles del sistema se utiliza en todo el entorno del sistema operativo y, por lo tanto, cualquier operación de copiar y pegar realizada en la aplicación Electron es válida en todo el sistema operativo. El módulo del portapapeles se puede usar directamente en el proceso principal , así como en el proceso de procesamiento de la aplicación. Por lo tanto, no necesitamos el módulo remoto Electron para importarlo.

Ejemplo: siga los pasos proporcionados para implementar la API del portapapeles en Electron.

  • Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando, 
    npm init

    Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

    npm install electron --save

    Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la clave de secuencias de comandos . Copie cualquier archivo de imagen de su elección en la carpeta de activos y asígnele el nombre image.png . En este tutorial, utilizaremos el logotipo de Electron como archivo image.png .
    paquete.json:

    {
  "name": "electron-clip",
  "version": "1.0.0",
  "description": "Clipboard API in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}
  • Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

    principal.js:

    const { app, BrowserWindow } = require('electron')
      
    function createWindow() {
      
      // Create the browser window.
      const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
      
      // Load the index.html of the app.
      win.loadFile('src/index.html')
      
      // Open the DevTools.
      win.webContents.openDevTools()
    }
      
    // This method will be called when Electron 
    // has finished initialization and is ready 
    // to create browser windows. Some APIs can 
    // only be used after this event occurs. This 
    // method is equivalent to 'app.on('ready', function())'
    app.whenReady().then(createWindow)
      
    // Quit when all windows are closed.
    app.on('window-all-closed',() => {
      
      // On macOS it is common for applications and 
      // their menu bar to stay active until the user 
      // quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
      
    app.on('activate',() => {
      
        // On macOS it's common to re-create a window
        // in the app when the dock icon is clicked and
        // there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
      }
    })
      
    // In this file, you can include the rest of your 
    // app's specific main process code. You can also 
    // put them in separate files and require them here.
  • Paso 3: Cree el archivo index.html y el archivo index.js dentro del directorio src . También copiaremos el código Boilerplate para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

    índice.html:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <!-- https://electronjs.org/docs/tutorial
                               /security#csp-meta-tag -->
        <meta http-equiv="Content-Security-Policy" 
              content="script-src 'self' 'unsafe-inline';" />
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using node 
        <script>
            document.write(process.versions.node)
        </script>, Chrome 
        <script>
            document.write(process.versions.chrome)
        </script>, and Electron 
        <script>
            document.write(process.versions.electron)
        </script>.
      
        <h3>Clipboard API in Electron</h3>
        <input id="enter" type="text">
        <button id="copy">Copy</button>
        <button id="paste">Paste</button>
      
        <br><br>
        <textarea name="area" id="area" cols="30" rows="10"></textarea>
      
        <br><br>
        <button id="copyHtml">Copy & Paste HTML</button>
      
        <br><br>
        <button id="copyRtf">
            Copy & Paste RTF (Rich Text Format)
        </button>
      
        <br><br>
        <img src="../assets/image.png" alt="">
        <br><br>
        <button id="copyImage">Copy & Paste Image</button>
       
        <!-- Adding Individual Renderer Process JS File -->
        <script src="index.js"></script>
      </body>
    </html>

    Salida: en este punto, nuestra aplicación está configurada y podemos iniciar la aplicación para verificar la salida de la GUI. Para iniciar la aplicación Electron, ejecute el comando:

    npm start

    GUI Output

  • Paso 4: Los botones aún no tienen ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js ,

    A continuación se proporciona una explicación detallada de todos los métodos de instancia del módulo del portapapeles utilizado en el código. Para obtener información más detallada sobre la API del portapapeles, consulte este enlace .
    Nota : en el entorno Linux , también hay un portapapeles de selección . Para usar y manipular el portapapeles de selección , simplemente podemos pasar la selección de valor a todos los métodos de instancia del módulo del portapapeles que lo admitan. También de acuerdo con la documentación oficial de Electron, todos los métodos de instancias experimentales proporcionados por el módulo del portapapeles se pueden eliminar en futuras actualizaciones de Electron.

    • clipboard.clear(type) Este método se utiliza para borrar todo el contenido del portapapeles del sistema.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard. AvailableFormats(type) Este método devuelve una String[] que representa todos los formatos admitidos para el tipo de portapapeles dado , como texto/html , texto/sin formato , etc.
      Nota : este método no devuelve valores coherentes según lo probado en Windows . A veces devuelve una array vacía y otras veces devuelve una combinación de todos los valores posibles admitidos por el tipo de portapapeles. Según la documentación oficial de Electron, este no es el comportamiento esperado.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.writeText(texto, tipo) Este método escribe el texto en el portapapeles como formato de texto sin formato. Este método no tiene un tipo de devolución. Este método tiene la misma funcionalidad que la activada por Ctrl+C en Windows . En nuestro código, este método está asociado con el botón Copiar .
      • texto: String Este valor no puede estar vacío.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • portapapeles.readText(tipo) Este método devuelve el contenido del portapapeles como texto sin formato. Devuelve un valor de string que contiene el texto. Este método tiene la misma funcionalidad que la activada por Ctrl+V en Windows . En nuestro código, este método está asociado con el botón Pegar .
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.writeHTML(marcado, tipo) Este método escribe la string de marcado como marcado HTML en el portapapeles. Este método no tiene un tipo de devolución. En nuestro código, este método forma parte del botón Copiar y pegar HTML .
      • marcado: String Este valor no puede estar vacío.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.readHTML() Este método devuelve el contenido del portapapeles como marcado HTML. Devuelve un valor de string que contiene el marcado. En nuestro código, este método forma parte del botón Copiar y pegar HTML .
      Nota: este método no siempre devuelve un marcado HTML como se probó en Windows . Incluso si pasamos un texto sin formato al método clipboard.writeHTML() , este método devolverá el valor solo como texto sin formato. Según la documentación oficial de Electron, este no es el comportamiento esperado.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.writeRTF(text, type) Este método escribe la string de texto como RTF (formato de texto enriquecido) en el portapapeles. Este método no tiene un tipo de devolución. En nuestro código, este método forma parte del botón Copiar y pegar RTF (formato de texto enriquecido) .
      • texto: String Este valor no puede estar vacío.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.readRTF() Este método devuelve el contenido del portapapeles como RTF. Devuelve un valor de string que contiene el RTF. En nuestro código, este método forma parte del botón Copiar y pegar RTF (formato de texto enriquecido) .
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.writeImage(imagen, tipo) Este método escribe una imagen en el portapapeles. Este método no tiene un tipo de devolución. En nuestro código, este método es parte del botón Copiar y pegar imagen .
      • image: NativeImage (opcional) La imagen debe ser una imagen nativa tal como la utiliza la API de NativeImage de Electron para que se escriba en el portapapeles. Si no se pasa este parámetro, se usa nulo en su lugar. Hemos utilizado el método nativeImage.createFromPath(ruta) para crear un objeto NativeImage del archivo image.png en la carpeta de activos . Para obtener información más detallada sobre el método nativeImage.createFromPath() , consulte este enlace .
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • portapapeles.readImage(tipo) Este método devuelve el contenido del portapapeles como un objeto de imagen NativeImage . En nuestro código, este método es parte del botón Copiar y pegar imagen .
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .

    index.js: agregue el siguiente fragmento en ese archivo.

    const electron = require('electron')
      
    // Importing the clipboard Module
    const clipboard = electron.clipboard;
      
    // Importing the nativeImage module 
    const nativeImage = electron.nativeImage
      
    var input = document.getElementById('enter');
    var copy = document.getElementById('copy');
    var paste = document.getElementById('paste');
    var area = document.getElementById('area');
      
    clipboard.clear();
    const formats = clipboard.availableFormats();
    console.log(formats);
      
    copy.addEventListener('click',() => {
        if (input.value) {
            clipboard.writeText(input.value);
            console.log('Copied Text Successfully')
        }
    });
      
    paste.addEventListener('click',() => {
        area.innerText = clipboard.readText();
        console.log('Pasted Text Successfully')
    });
      
    var copyHtml = document.getElementById('copyHtml');
    copyHtml.addEventListener('click',() => {
        clipboard.writeHTML('<b>Hello GeeksForGeeks</b>');
      
        console.log(clipboard.readHTML());
    });
      
    var copyRtf = document.getElementById('copyRtf');
    copyRtf.addEventListener('click',() => {
      clipboard.writeRTF('{\\rtf1\\ansi{\\fonttbl\\f0\\fswiss Helvetica;}' + 
        '\\f0\\pard\nThis is some {\\b bold} text.\\par\n}')
      
      console.log(clipboard.readRTF());
    });
      
    var copyImage = document.getElementById('copyImage');
    copyImage.addEventListener('click',() => {
        const image = nativeImage.createFromPath('/assets/image.png')
        clipboard.writeImage(image);
        console.log('Copied Image Successfully');
      
        console.log(clipboard.readImage());
    });

    Nota: Hemos cubierto todos los métodos de Instancia del módulo del portapapeles como se usa en el código. En este punto, deberíamos poder realizar operaciones de copiar y pegar utilizando el módulo del portapapeles . Sin embargo, hay algunos métodos de Instancia más compatibles con la API del Portapapeles que se muestran en el Paso siguiente.
    Producción:

  • Paso 5: algunos métodos de instancia más compatibles con el módulo del portapapeles ,
    • portapapeles.has(formato, tipo) Este método es un método Experimental . Este método se usa para verificar si el portapapeles admite un formato en particular o no. Devuelve un booleano .
      • formato: String Este valor no puede estar vacío. El formato a comprobar. Podemos pasar cualquier valor, como texto sin formato, marcado HTML, RTF o un objeto NativeImage .
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .

      Nota : este método no siempre devuelve el valor correcto según lo probado en Windows . Incluso si pasamos un formato compatible con el portapapeles, el valor devuelto es falso . Según la documentación oficial de Electron, este no es el comportamiento esperado.

    • clipboard.read(formato) Este método es un método Experimental . Este método se utiliza para leer el tipo de formato del portapapeles. Devuelve un valor de string que contiene el tipo de formato.
      • formato: String Este valor no puede estar vacío. El formato a comprobar. Podemos pasar cualquier valor, como texto sin formato, marcado HTML, RTF o un objeto NativeImage .
    • clipboard.writeBookmark(título, url, tipo) Este método solo es compatible con Windows y macOS . Este método escribe el título y la URL en el portapapeles como marcador.
      Nota: este método no funciona como se esperaba en Windows . Además, la mayoría de las aplicaciones de Windows no admiten pegar marcadores en ellas. Para obtener información más detallada, consulte este enlace .
      • título: String Este valor no puede estar vacío. El título del marcador.
      • url: String Este valor no puede estar vacío. La URL del marcador.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
    • clipboard.readBookmark() Este método solo es compatible con Windows y macOS . Este método devuelve un objeto que contiene el título y la URL como claves que representan el marcador como se escribió en el portapapeles mediante el método clipboard.writeBookmark() . El título y las claves de URL se devolverán vacíos cuando el marcador no esté disponible.
    • clipboard.writeFindText(text) Este método solo es compatible con macOS . Este método escribe el texto en la mesa de trabajo de búsqueda como texto sin formato. La mesa de trabajo de búsqueda contiene información sobre el estado actual de la mesa de trabajo del panel de búsqueda de la aplicación activa. Para obtener información más detallada, consulte este enlace . Este método utiliza IPC síncrono cuando se llama desde el proceso Renderer .
    • clipboard.readFindText() Este método solo es compatible con macOS . Devuelve un texto como String desde el área de trabajo de búsqueda . Este método utiliza IPC síncrono cuando se llama desde el proceso Renderer . El valor se almacena en caché originalmente cuando la aplicación se vuelve inactiva inicialmente y se vuelve a leer desde el área de trabajo de búsqueda cada vez que la aplicación se activa nuevamente.
    • portapapeles.escribir(datos, tipo) Este método se utiliza para escribir colectivamente diferentes formatos en el portapapeles con la ayuda del objeto de datos . Los diferentes valores de formato se pueden leer individualmente usando sus respectivos métodos de lectura o leer colectivamente usando el método clipboard.read() que simplemente devuelve el objeto de datos que contiene las diversas claves no vacías. Cualquier formato que inicialmente no se haya escrito en el portapapeles o que estuviera vacío se devolverá como una string vacía.
      • tipo: string (opcional) El valor puede ser una selección (Linux) o un portapapeles . El valor predeterminado es portapapeles .
      • data: Objeto Puede contener los siguientes parámetros.
        • text: String (Opcional) La string en formato de texto sin formato.
        • html: String (Opcional) La string en formato de marcado HTML
        • rtf: String (Opcional) La String en formato RTF.
        • image: NativeImage (opcional) La imagen debe ser un objeto nativeImage tal como lo utiliza la API de Electron NativeImage . Si no se pasa este parámetro, se usa nulo en su lugar.

    Nota: Esto concluye el módulo portapapeles de Electron. El módulo del portapapeles no admite ningún evento de instancia ni método estático.

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *