github ace 编辑器上的插入符号位置答案

【问题标题】：Caret position on github ace editorgithub ace 编辑器上的插入符号位置
【发布时间】：2015-03-15 23:33:32
【问题描述】：

我正在开发一个 chrome 扩展，我可以在 github 网络编辑器中插入文本。插入的文本应该在插入符号的位置，我不知道如何得到它。

github 编辑器，也就是 ace 编辑器，有这个 HTML 代码：

<div class="commit-create">
<textarea id="blob_contents"
      class="file-editor-textarea js-blob-contents js-code-textarea"
      rows="35" name="value"
      data-filename="README.md"
      data-language="Markdown"
      data-ace-mode="markdown"
      data-allow-unchanged=""
      data-test-id="blob-file-editor"
      placeholder="Enter file contents here"
      spellcheck="false"
      autofocus>
Line 1
Line 2
Line 3
Line 4
</textarea>
</div>

在我的 manifest.json 中，我包含了 ace.js（从 here 获得，我希望它是正确的 .js 文件）

...    
"content_scripts": 
      [{
        "matches": ["*://*.github.com/*/edit/*"],
        "js":      ["ace.js", "content.js"]
      }],
...

这是用户提供的 javascript 代码：

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) 
{
    ...
    var editor = document.querySelector(".ace_editor").env.editor;
    var cursor = editor.selection.getCursor() // returns object like {row:1 , column: 4}
    editor.insert("text") // insert string at cursor
    ...
}

我收到此错误

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'editor' of undefined

=== 编辑 1 ====

感谢一位用户，我取得了一些进步。该代码适用于 chrome 控制台，但不适用于 content.js，这可能是一个我不明白为什么的安全问题。

【问题讨论】：

使用 ACE API 设置位置并注入文本。编辑器并不是真正的 textarea，所以 textarea 方法根本不起作用。
感谢您的评论，已经在 ACE API 上苦苦挣扎了一个小时，没有运气

标签： javascript google-chrome-extension ace-editor

【解决方案1】：

你需要使用ace api来实现它

var editor = document.querySelector(".ace_editor").env.editor;
var cursor = editor.selection.getCursor() // returns object like {row:1 , column: 4}
editor.insert("text") // insert string at cursor

【讨论】：

感谢您的评论，您能阅读我的编辑#2 吗？我在获取当前光标位置时遇到问题
您正在创建一个新编辑器，使用我在答案中显示的方法而不是 ace.edit
啊，你是对的，但我得到 TypeError: Cannot read property 'env' of null
尝试不使用 commit-create，我包含它是为了使选择器更具体，但可能取决于页面
我试过 .ace_editor .commit-create .file-editor-textarea .js-blob-contents .js-code-textarea ，都不起作用

【解决方案2】：

感谢一位指导我解决问题的用户，这是我所做的：

使用ace API，下载js文件：https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js

manifest.json：

  "content_scripts": 
  [{
    "matches": ["*://*.github.com/*/edit/*"],
    "js":      ["ace.js", "jquery.js", "content.js"]
  }],

因为安全问题，我无法直接获取ace编辑器对象，所以需要注入这个脚本：

function InsertToAceEditor(message)
{
    var scriptContent = "document.querySelector('.ace_editor').env.editor.insert('" +  message+ " ')";
    var script = document.createElement('script');
    script.id = 'tmpScript';
    script.appendChild(document.createTextNode(scriptContent));
    document.body.appendChild(script);
    $("#tmpScript").remove();
}

正如用户指出的那样，解释如下：https://stackoverflow.com/a/24344154/1743328

【讨论】：

【解决方案3】：

由于安全策略指令“unsafe-inline”清单 v3，这不再有效

【讨论】：

请添加官方的外部来源！