web-dev-qa-db-fra.com

Comment puis-je obtenir de la valeur de l'éditeur ACE?

J'utilise ACE pour la première fois. J'ai les questions ci-dessous à ce sujet.

  1. Comment trouver l'instance de l'éditeur ACE sur la page? Je ne veux pas conserver une variable globale qui contiendra l'instance de l'éditeur. J'ai besoin de trouver son instance sur demande.

  2. Comment obtenir et définir sa valeur?

Je suis ouvert aux suggestions pour un meilleur éditeur que ACE éditeur qui supportera presque tous les types de langage/balisage/css, etc. et hautement intégré à jQuery.

javascriptjqueryace-editor
58
ShankarSangoli

Par leur API :

Annotation: 

<div id="aceEditor" style="height: 500px; width: 500px">some text</div>

Recherche d'une instance: 

var editor = ace.edit("aceEditor");

Obtention/définition des valeurs: 

var code = editor.getValue();

editor.setValue("new code here");

D'après mon expérience, Ace est le meilleur éditeur de code que j'ai vu. Il y en a peu d'autres comme CodeMirror etc. mais je les ai trouvés moins utiles ou difficiles à intégrer qu'Ace.

Voici une page Wiki pour comparer ces éditeurs .

Il y en a un payé aussi que je n'ai pas essayé (et je ne me souviens pas pour l'instant). Sera mis à jour plus tard si je peux le trouver.

120
Mrchief

Pour enregistrer le contenu de l'éditeur, j'ai placé une entrée cachée juste avant, et j'ai initialisé l'éditeur comme suit:

    var $editor = $('#editor');
    if ($editor.length > 0) {
        var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/css");
        $editor.closest('form').submit(function() {
            var code = editor.getValue();
            $editor.prev('input[type=hidden]').val(code);                
        });
    }

Lorsque mon formulaire est soumis, nous obtenons la valeur de l'éditeur et la copions dans l'entrée masquée.

15
Ben Foster

Je résous ce problème avec une entrée cachée :)

    <input type="hidden" name="komutdosyasi" style="display: none;">
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
    var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/batchfile");
        editor.setTheme("ace/theme/monokai");

    var input = $('input[name="komutdosyasi"]');
        editor.getSession().on("change", function () {
        input.val(editor.getSession().getValue());
    });
</script>
8
SelçukDERE

Supposons que nous avons initialisé l'éditeur ace sur une balise en html. EX: <div id="MyAceEditor">this the editor place holder</div>.

Dans la section javascript, après avoir chargé ace.js,

La première étape consiste à trouver l'instance de votre éditeur comme ci-dessous.

var editor = ace.edit("MyAceEditor");

Pour obtenir la valeur de l'éditeur ace, utilisez la méthode getValue () comme ci-dessous.

var myCode = editor.getSession().getValue();

Pour définir la valeur sur ace editor (pour pousser du code dans l'éditeur), utilisez la méthode setValue() comme ci-dessous.

editor.getSession().setValue("write your code here");
6
Sairam Venkata
var editor = AceEditor.getCurrentFileEditor("MyEditor");

Cela retournerait l'objet éditeur en cours

var code = editor.getValue();

Cela retournerait le texte dans l'éditeur.

0
Nithish