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

本文概述

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

Ace是用JavaScript编写的可嵌入代码编辑器, 可以轻松地嵌入任何网页和JavaScript应用程序中。在某些情况下, 你需要从外部源中向编辑器中插入一些文本, 无论它们是何种源, 都可能需要将它们插入与你的需求相匹配的位置(而不是编辑器所需的位置)。通过Ace Editor的API, 你将可以轻松指定编辑器的行(行)和文本的放置列。
在自定义位置插入文本要在自定义位置的编辑器中插入一些文本, 你需要在编辑器的session对象中访问insert方法。此方法需要2个参数, 第一个是具有2个属性的行和列的对象, 这些值是整数, 用于指定应插入文本的位置(行是-1行的编号, 列是字符的数量放置文本的右侧), 请参见以下示例：

// Create an editorvar editor = ace.edit("editorID"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript"); // Add some text in a custom positionvar 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 positioneditor.session.insert(cursorPosition, "#fff");

那应该在编辑器的双引号中插入字符串#fff：