Cómo cortar, copiar, pegar y seleccionar todo el texto en Ace Editor

Si estás tratando de implementar las tareas de manipulación de texto más básicas de un editor en un proyecto que usa el editor Ace, ahora puede saber que la biblioteca en sí no ofrece ninguna utilidad para interactuar con el portapapeles. En este artículo, le explicaré cómo ejecutar lo básico de la manipulación de texto usando la API de Clipbard de JavaScript.

Nota: para manipular el Portapapeles con JavaScript, usaremos la API del Portapapeles. Si no puede usar esta API, tal vez porque es compatible con navegadores más antiguos o simplemente porque tiene mejores alternativas como manipular la API nativa si está desarrollando una aplicación móvil híbrida, depende de usted cómo manipular el texto que puede obtener. con el editor ACE, sin embargo, el resto de la lógica sigue siendo la misma.

A. Cortar texto

Para cortar el texto en el editor Ace, es tan fácil como ejecutar el comando de corte o insertar una cadena vacía en el editor, ya que reemplazará el texto seleccionado:

let editor = ace.edit("editor");

// Opción A: ejecutar el comando de corte
editor.execCommand("cut");

// Opción B: inserta una cadena vacía en la selección actual
// ya que solo se inyecta cuando hay texto seleccionado
editor.insert("");

El único problema con esto es que proporciona con éxito la sensación de cortar el texto a medida que se elimina del editor, sin embargo, no se colocará en el portapapeles. Así que depende de nosotros cómo colocar el texto en el portapapeles. En este caso, nos vamos a la misma implementación de copiar el texto al portapapeles (verifique el paso B para la implementación de isClipboardWritingAllowed):

// 1. Instanciar editor
let editor = ace.edit("editor");

// 2. Almacenar texto que se copiará al portapapeles
let copyText = editor.getCopyText();

// 3. Simular corte en el editor
editor.insert("");

// 4. Verificar si se permite la escritura en el portapapeles
isClipboardWritingAllowed().then(function(allowed){

    // 5. Escribir en el portapapeles si está permitido (simulando que el texto se ha cortado del editor)
    if(allowed){
        navigator.clipboard.writeText(copyText).then(function(){
            console.log("¡El texto se ha cortado correctamente en el portapapeles!");
        });
    }
}).catch(function(err){
    console.log("No se puede copiar al portapapeles", err);
});

B. Copiar texto

Ace editor por defecto no proporciona ningún soporte para el portapapeles a través del código. Solo es posible copiar texto del editor a través de los atajos de teclado habituales, sin embargo, es posible implementar nuestra propia función de colocar el texto seleccionado en el portapapeles utilizando la API del portapapeles de JavaScript. Lo que necesitas es implementar como primero un método que verifique si se permite el acceso al portapapeles, esto se puede hacer a través de JavaScript Promise o usando async / await:

// Determine si es posible escribir una imagen / texto en el portapapeles.
function isClipboardWritingAllowed(){
    return new Promise(function(resolve, reject){
        try{
            navigator.permissions.query({ name: "clipboard-write" }).then(function(status){
                // PermissionStatus object
                // {
                //  onchange: null,
                //  state: "granted" (it could be as well `denied` or `prompt`)
                // }
                console.log(status);

                resolve((status.state == "granted"));
            });
        }catch(error){
             // Esto podría deberse a una incompatibilidad del navegador o un error de seguridad
             // Recuerda que esta característica solo funciona a través de HTTPS
            reject(error);
        }
    });
}

El método anterior nos permitirá verificar si es posible escribir contenido en el portapapeles. Ahora, todo lo que queda es obtener el texto seleccionado del editor y colocarlo en el portapapeles:

// 1. Instanciar editor
let editor = ace.edit("editor");

// 2. Almacenar texto que se copiará al portapapeles
let copyText = editor.getCopyText();

// 3. Verificar si se permite la escritura en el portapapeles
isClipboardWritingAllowed().then(function(allowed){
    // 4. Escribir en el portapapeles si está permitido
    if(allowed){
        navigator.clipboard.writeText(copyText).then(function(){
            console.log("¡El texto se ha copiado correctamente en el portapapeles!");
        });
    }
}).catch(function(err){
    console.log("No se puede copiar al portapapeles", err);
});

C. Pegar

Si desea obtener el contenido de texto del portapapeles e insertarlo en una posición personalizada en el editor Ace, debe obtener acceso al portapapeles como primera lectura (cosa que puede hacer con la misma API). El siguiente método verifica si tiene acceso de lectura al portapapeles:

// Determine si es posible leer una imagen / texto desde el portapapeles.
function isClipboardReadingAllowed(){
    return new Promise(function(resolve, reject){
        try{
            navigator.permissions.query({ name: "clipboard-read" }).then(function(status){
                // PermissionStatus object
                // {
                //  onchange: null,
                //  state: "granted" (it could be as well `denied` or `prompt`)
                // }
                console.log(status);

                resolve((status.state == "granted" || status.state == "prompt"));
            });
        }catch(error){
            // Esto podría deberse a una incompatibilidad del navegador o un error de seguridad.
            // Recuerde que esta función solo funciona a través de HTTPS
            reject(error);
        }
    });
}

Al iniciar el método, el usuario deberá otorgar específicamente acceso de lectura al portapapeles:

Grant Clipboard Read Access

Luego, simplemente puedes acceder al contenido del portapapeles, buscar texto sin formato y pegarlo en la posición actual del cursor de su editor:

// 1. Instanciar editor
let editor = ace.edit("editor");

// 2. Verifique el permiso de lectura del portapapeles
isClipboardReadingAllowed().then(function(isAllowed){
    if(isAllowed){

        // 3. Leer el contenido del portapapeles
        navigator.clipboard.read().then((data) => {
            // 4. Itere todos los elementos posibles del portapapeles
            for (let i = 0; i < data.length; i++) {
                // 5. Compruebe si el elemento contiene texto
                if (data[i].types.includes("text/plain")) {
                    data[i].getType("text/plain").then(function(blob){
                        blob.text().then(function(text){
                            // 6. Insertar texto desde el portapapeles a la posición actual del cursor del editor
                            editor.session.insert(editor.getCursorPosition(), text);

                            // O a una posición personalizada
                            // editor.session.insert({row: 2, column: 56}, text);
                        });
                    });
                }else{
                    console.log("No texto / plano para pegar en el editor");
                }
            }
        });
    }
}).catch(function(error){
    console.log("cannot read clipboard", error);
});

D. Seleccionar todo el texto

Por último, pero no menos importante, ace editor incluye un método predeterminado para seleccionar todo el contenido del editor:

// 1. Instanciar editor
let editor = ace.edit("editor");

// 2. Seleccionar todo el contenido del editor.
editor.selectAll();

Puede hacer lo que necesite con este texto como usar la API del Portapapeles para establecer su nuevo contenido como el texto seleccionado.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable