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-й строке:
Чтобы добиться этого, мы будем использовать тот же метод 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
внутри двойных кавычек нашего редактора: