Cómo insertar texto en una posición específica con ACE Editor

Ace es un editor de código incrustable escrito en JavaScript que se puede incrustar fácilmente en cualquier página web y aplicación JavaScript. En algunos escenarios, necesitará insertar algún texto dentro de su editor de fuentes externas, independientemente del tipo de fuentes que sean, probablemente deberán insertarse en una posición que coincida con sus necesidades (no donde el editor quiera). A través de la API de Ace Editor podrás especificar fácilmente en qué fila (línea) del editor y en qué columna debe colocarse tu texto.

Insertar texto en posición personalizada

Para insertar texto en el editor en una posición personalizada, debe acceder al insertmétodo en el sessionobjeto del editor. Este método espera 2 argumentos, el primero es un objeto con 2 propiedades rowcolumnestos valores son enteros que especifican la posición donde se debe insertar el texto (la fila es el número de la línea -1 y la columna el número de caracteres al justo en el que se colocará el texto), vea el siguiente ejemplo:

//Crear un editor
var editor = ace.edit("editorID");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");


// Agrega texto en una posición personalizada
var customPosition = {
    row: 0,
    column: 0
};

var text = "Este texto se ha insertado dinámicamente";

editor.session.insert(customPosition , text);

Tenga en cuenta que, de la misma manera que lo hace una matriz, la posición (líneas y columnas) en el editor comienza con 0 (la línea 1 será la fila 0).

Insertar texto donde se encuentra el cursor

En este ejemplo queremos insertar algún texto en el editor exactamente donde se ubica el signo de intercalación (cursor), que estaría dentro de las comillas dobles en la 4ta línea:

ACE Editor insert text where cursor is located

Para lograrlo, usaremos el mismo método insertdel editor.sessionobjeto, sin embargo, el primer argumento no lo generará usted sino otro método. Puede recuperar la posición del cursor utilizando el getCursorPositionmétodo del editor que devuelve un objeto con 2 propiedades, fila y columna. Para insertar texto donde se encuentra el cursor, proporcione como primer argumento en el método de inserción del objeto recuperado editor.session y getCursorPosition como segundo argumento el texto que desea insertar:

// Recuperar la posición del cursor
// En el ejemplo sería un objeto como
// {row: 3, column: 18}
var cursorPosition = editor.getCursorPosition();
// Insertar texto (segundo argumento) con la posición dada
editor.session.insert(cursorPosition,"#fff");

Eso debería insertar la cadena #fffdentro de las comillas dobles de nuestro editor:

Insert text where cursor is located ACE Editor

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable