如何使用ACE Editor将文本插入特定位置

本文概述

• 在自定义位置插入文本
• 在光标所在的位置插入文本

Ace是用JavaScript编写的可嵌入代码编辑器, 可以轻松地嵌入任何网页和JavaScript应用程序中。在某些情况下, 你需要从外部源中向编辑器中插入一些文本, 无论它们是何种源, 都可能需要将它们插入与你的需求相匹配的位置(而不是编辑器所需的位置)。通过Ace Editor的API, 你将可以轻松指定编辑器的行(行)和文本的放置列。

在自定义位置插入文本

要在自定义位置的编辑器中插入一些文本, 你需要在编辑器的session对象中访问insert方法。此方法需要2个参数, 第一个是具有2个属性的行和列的对象, 这些值是整数, 用于指定应插入文本的位置(行是-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行中的双引号内：

为此, 我们将使用editor.session对象的相同方法插入, 但是第一个参数不会由你生成, 而是由另一个方法生成。你可以使用编辑器的getCursorPosition方法检索光标的位置, 该方法返回一个具有2个属性(行和列)的对象。要在光标所在的位置插入一些文本, 请在editor.session的insert方法中将第一个参数提供给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：

编码愉快！