如何与javascript元素交互

How to interact with a javascript element

本文关键字：元素 交互 javascript      更新时间：2023-09-26

我正在使用ace编辑器（通过jquery ace rails gem）将文本区域转换为代码编辑器。

<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代码编辑器实例"部分。

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

所以试试jQuery（'.mycodearea'）.data（'ace'）.ace.insert（"Somethingcool"）；而不是ace.insert（"Something cool"）；

也可以尝试使用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");
    })
});

演示：Fiddle

相关文章：