web-dev-qa-db-fra.com

Quand je modifie le code dans un TextArea en utilisant CodeMirror, comment le refléter dans un autre textarea avec js ou jQuery

L'application: J'ai un élément textarea dans ma page. Il est transformé en utilisant CodeMirror, car je dois mettre en retrait et mettre en évidence le code HTML avec. L'image est dans le lien: [Textarea using codemirror]

http://uploadingit.com/file/gxftd2cps9wm7zhp/cm.png

Voici le code pour textarea using codemirror: 

</textarea>
    <button type="submit">Post</button>       
</form>
 <script>

   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     mode: { name: "xml", htmlMode: true },
     lineNumbers: true,
     tabMode: "indent",
     matchBrackets: true,
     path: 'js/', 
     searchMode: 'inline',
     onCursorActivity: function () {
       editor.setLineClass(hlLine, null);
       hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
     }
   });

   var hlLine = editor.setLineClass(0, "activeline");
  </script>

Comment le faire ?: Lorsque je clique sur le bouton Publier, tout le code doit être transmis à une autre zone de texte. J'ai besoin de faire cela avec javascript ou jQuery, mais j'ai du mal à le faire. De l'aide?

Pour l'application du monde réel le code dans cette zone de texte (de la photo ci-dessus) devrait affecter l'API Html Designer. Tous les changements dans le concepteur HTML doivent être reflétés dans cette zone de texte (qui utilise codemirror pour la lisibilité) et l’inverse. Lorsque j'édite dans la zone de texte, les modifications doivent être reflétées dans HtmlDesigner, mais dans ce cas de simulation -> dans la deuxième zone de texte.

Exemple: comme l'éditeur de code Visual Studio .Net WebPage qui a le mode Designer + Source. Maintenant c'est clair?

Je demande comment implémenter le mécanisme décrit ci-dessus en utilisant javascript ou jquery. Merci beaucoup!

javascriptjqueryasp.netvisual-studio-2010codemirror
19
A.Mano

Passez une option onChange à CodeMirror qui ressemble à ceci:

onChange: function (cm) {
   mySecondTextArea.value = cm.getValue();
}

Modifié pour noter: Depuis CodeMirror version 2.0, vous ne passez plus une option onChange pour enregistrer un gestionnaire de modifications, mais appelez plutôt instance.on("change", function(cm, change) { ... }). http://codemirror.net/doc/manual.html#event_change

31
Marijn

La dernière version publiée à l'instant (v 3.15) fonctionne avec cette solution:

// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror){
  // get value right from instance
  yourTextarea.value = cMirror.getValue();
});
20
Николай Конев

Cela fonctionne CodeMirror 5.22.0:

CodeMirror.fromTextArea(document.getElementById('grammar'), {
    lineNumbers: true,
    mode: 'pegjs',
}).on('change', editor => {
    console.log(editor.getValue());
});
5
mpen

la gestion onChange dans le code miroir ne ressemble pas à ceci:

onChange: function(cm) { mySecondTextArea.value = cm.getValue(); }

vous devez utiliser:

$.fn.buildCodeMirror = function(){
    var cmOption {...};
    var cm = CodeMirror($("MyDomObjectSelector")[0],cmOption);
    cm.on("change",$.fn.cmChange);
}

$.fn.cmChange = function(cm,cmChangeObject){
    alert("code mirror content has changed");
}
2
To delete profile

Donc, vous voulez copier le texte d'un TextArea (ce qui est un contrôle input, en passant) vers un autre?

//Set the button to call a Javascript function when it is clicked
<button type="submit" onclick="copyText();">Post</button>

<script type="text/javascript">
    function copyText() {
        //Get the text in the first input
        var text = document.getElementById("firstTextArea").getValue(); 
        //Can't use .value here as it returns the starting value of the editor

        //Set the text in the second input to what we copied from the first
        document.getElementById("secondTextArea").value = text;
    }
</script>
1
Brian Beckett

Vous pouvez utiliser ceci ...

var editor_js = CodeMirror.fromTextArea(document.getElementById("js"), {
   mode: 'text/javascript',
   theme: 'icecoder',
   styleActiveLine: true,
   lineNumbers: true,
   lineWrapping: true,
});

Et obtenir des données avec editor_js.getValue()

0
Mrawan Elboshy