Question

我的网页上有一个ACE代码编辑器，当下拉选项发生变化时，该代码编辑器应该刷新一个新值。目前，当通过＆＃39; onchange＆＃39;来调用该功能时下拉时，会出现一条警告消息。但是，我无法更改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

我找到了改变价值的方法......

$('.my-code-area').ace({
    theme: 'twilight',
    lang: 'ruby'
    });

    function updateTextArea() {
    var decorator = $('.my-code-area').data('ace');
    var aceInstance = decorator;
    var text = "source changed"
    aceInstance.destroy();
    aceInstance.create();
    aceInstance.editor.theme('twilight');
    aceInstance.editor.lang('ruby');
    aceInstance.editor.value('source changed');
    }

Answer 2

您可以使用

从jquery包装器获取ace实例

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

然后致电

editor.setValue("text")

或者如果要重置撤消管理器

editor.session.setValue("text")

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

2 个答案: