如何与javascript元素进行交互

Question

我正在使用ace编辑器（通过jquery-ace-rails gem）将textarea转换为代码编辑器。

<textarea class="my-code-area" rows="4" style="width: 100%">puts 'foo'</textarea>

<script>
  $(document).ready(function(){
    $('.my-code-area').ace({ theme: 'twilight', lang: 'ruby' });
  });
</script>

我想在页面上创建一个链接以将文本插入编辑器：

<%= link_to 'Insert', '#', :onclick => 'ace.insert("Something cool");' %>

任何帮助表示赞赏-我以前没有使用过JavaScript。 一旦它开始工作，我将以一种不太吸引人的方式来做。

这可能是相关的： http : //cheef.github.io/jquery-ace/，尤其是“访问ACE代码编辑器实例”部分。

Answer 1

您可以使用文档中提供的数据属性ace访问ace实例-访问ACE代码编辑器实例

因此，尝试使用jQuery（'。my-code-area'）。data（'ace'）。ace.insert（“ Something cool”）; 而不是ace.insert（“酷的东西”）;

还尝试使用jQuery事件处理程序，而不是使用内联事件处理程序，因此在链接中添加类或ID，然后删除内联事件处理程序

jQuery(function ($) {
    $('.my-code-area').ace({
        theme: 'twilight',
        lang: 'ruby'
    });
    var decorator = $('.my-code-area').data('ace').editor;
    // ACE Code Editor instance
    var ace = decorator.ace;

    //if the link has the id insert-linl 
    $('#insert-link').click(function(){
        ace.insert("Something cool");
    })
});

演示： 小提琴