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

Javascript github ace编辑器上的插入符号位置,javascript,google-chrome-extension,ace-editor,Javascript,Google Chrome Extension,Ace Editor,我正在开发一个chrome扩展,可以在github web编辑器中插入文本。插入的文本应该在插入符号位置,我不知道如何得到它 github编辑器是一个ace编辑器,具有以下HTML代码: <div class="commit-create"> <textarea id="blob_contents" class="file-editor-textarea js-blob-contents js-code-textarea" rows="35" name

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

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>
以下是用户提供的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

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

感谢一位引导我找到解决方案的用户, 以下是我所做的:

使用ace API,下载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();
}

正如一位用户所指出的,这里有一个解释:

使用ACE API设置位置并注入文本。编辑器不是一个真正的textarea,所以textarea方法根本不起作用。谢谢你的评论,已经与ACE API斗争了一个小时,没有你的评论,你能阅读我的编辑2吗?我在获取当前光标位置时遇到问题您正在创建一个新编辑器,请使用我在答案中显示的方法,而不是ace.editah您是正确的,但我得到了TypeError:如果没有commit create,则无法读取nulltry的属性'env',我将其包括在内是为了使选择器更具体,但这可能取决于pageI-trued.ace_-editor.commit-create.file-editor-textarea.js blob-contents.js-code-textarea,它们都不起作用
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();
}