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

您可以使用documentation - Access to ACE Code Editor instance

中提供的数据属性ace来访问ace实例

所以试试jQuery（＆＃39; .my-code-area＆＃39;）。数据（＆＃39; ace＆＃39;）。ace.insert（＆＃34; Something cool＆＃34;）;而不是ace.insert（＆＃34;酷的东西＆＃34;）;

还尝试使用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

如何与javascript元素进行交互

1 个答案: