javascript - 如何更改 jquery-ace 代码编辑器文本区域的值？

Question

我的网页上有一个 ACE 代码编辑器，当下拉选项发生更改时，该编辑器应该会刷新为新值。目前，当通过下拉列表的“onchange”调用该函数时，会出现一条警报消息。但是，我无法更改 ACE 代码编辑器中显示的内容。

我正在使用这个 jQuery 插件 - http://cheef.github.io/jquery-ace/ 。它没有太多文档。

<div class="container">
 <div class="column-left">
 <h2>Sources</h2>
    <%= collection_select(:source, :select_source, Source.all, :id, :name, options = {include_blank: "Please select a source..."}, html_options = {:onchange => "updateTextArea()"}) %>
 </div>
 <div class="column-center">
 <h2>Code</h2>
  <textarea id="txtbox1" class="my-code-area" rows="20" style="width: 100%">awaiting source...</textarea>
 </div>
</div>


<script>
    $('.my-code-area').ace({
        theme: 'twilight',
        lang: 'ruby'
    })
    var decorator = $('.my-code-area').data('ace');
    var aceInstance = decorator.ace;

    function updateTextArea() {
        var text = "source changed"
        alert(text);
        aceInstance.edit("txtbox1").setValue("source changed");
    }    
</script>

Answer 1

您可以使用 jquery 包装器获取 ace 实例

var editor = $('.my-code-area').data('ace').editor.ace

然后调用

editor.setValue("text")

或者如果您想重置撤消管理器

editor.session.setValue("text")