Как вставить текст в определенную позицию с ACE Editor

Ace — это встраиваемый редактор кода, написанный на JavaScript, который можно легко встроить в любую веб-страницу и приложение JavaScript. В некоторых сценариях вам нужно будет вставить текст в ваш редактор из внешних источников, независимо от того, какими бы они ни были, их, вероятно, нужно будет вставить в положение, соответствующее вашим потребностям (а не там, где хочет редактор). Через API Ace Editor вы сможете легко указать, в какой строке (строке) редактора и в каком столбце должен размещаться ваш текст.

Вставка текста в пользовательскую позицию

Чтобы вставить текст в редактор в произвольной позиции, вам нужно получить доступ к insert метод в session объект редактора. Этот метод ожидает 2 аргумента, первый — это объект с 2 свойствами row а также columnэти значения являются целыми числами, которые определяют позицию, в которую должен быть вставлен текст (строка — это номер строки -1, а столбец — количество символов справа, на котором будет размещен текст), см. следующий пример:

// Create an editor
var editor = ace.edit("editorID");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
// Add some text in a custom position
var customPosition = {
row: 0,
column: 0
};
var text = "This text has been dinamically inserted";
editor.session.insert(customPosition , text);

Обратите внимание, что точно так же, как массив, позиция (строки и столбцы) в редакторе начинается с 0 (строка 1 будет строкой 0).

Вставка текста там, где находится курсор

В этом примере мы хотим вставить некоторый текст в редакторе точно в том месте, где находится курсор (курсор), который будет внутри двойных кавычек в 4-й строке:

ACE Editor вставляет текст там, где находится курсор

Чтобы добиться этого, мы будем использовать тот же метод insert из editor.session объект, однако первый аргумент будет создан не вами, а другим методом. Вы можете получить положение курсора, используя getCursorPosition метод редактора, который возвращает объект с 2 свойствами, строкой и столбцом. Чтобы вставить какой-либо текст в том месте, где находится курсор, укажите в качестве первого аргумента метод вставки editor.session объект, полученный getCursorPosition и в качестве второго аргумента текст, который вы хотите вставить:

// Retrieve cursor position
// In the example would be an object like
// {row: 3, column: 18}
var cursorPosition = editor.getCursorPosition();
// Insert text (second argument) with given position
editor.session.insert(cursorPosition,"#fff");

Это должно вставить строку #fff внутри двойных кавычек нашего редактора:

Вставить текст, где находится курсор ACE Editor

Ссылка на основную публикацию
Adblock
detector