Comment interagir avec un élément javascript

Question

J'utilise l'éditeur as (via jquery-ace-rails gem) pour transformer une zone de texte en éditeur de code.

<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> 

Je voudrais créer un lien sur la page d'insérer du texte dans l'éditeur:

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

Toute aide appréciée - Je ne l'ai pas travaillé avec javascript avant. Une fois que je l'aurai fonctionné, je le ferai d'une manière moins envahissante.

Cela peut être pertinent: http://cheef.github.io/jquery-ace/ en particulier la section "Accès à l'instance de l'éditeur de code ACE".

Answer 1

Vous pouvez accéder à la ace par exemple en utilisant la propriété de données ace comme indiqué dans le documentation - Access to ACE Code Editor instance

Donc, essayez jQuery ('my-code régional). Les données (' as'). Ace.insert (» Quelque chose de cool "); au lieu de ace.insert ("Quelque chose de cool");

Essayez également d'utiliser des gestionnaires d'événements jQuery au lieu d'utiliser des gestionnaires d'événements inlined donc ajouter soit une classe ou un identifiant le lien puis retirez le gestionnaire d'événements en ligne

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"); 
    }) 
}); 

Démo: Fiddle