Wie sollte ich den Inhalt der Elemente im Ace-Editor ändern?

Question

Ich versuche, den Text in einigen Elementen auf Ass-Editor mit einem input type=range zu ändern, aber wenn ich versuche, wieder zu schreiben, zu dem Editor kehrt einen vorherigen Wert, bevor es mit Javascript geändert

var editordiv = document.getElementById("editor"); 
 
var editor = ace.edit("editor"); 
 
editor.getSession().setMode("ace/mode/javascript"); 
 
var elem; 
 
editordiv.onmousedown=function(e){ 
 
    if(e.target.classList.contains("ace_numeric")) elem=e.target; 
 
} 
 
function changeElement(range){ 
 
    if(elem) elem.textContent=range.value; //not changing correctly editor content 
 
}

#editor{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.ace_constant { 
 
    pointer-events:auto !important; 
 
} 
 
#range{ 
 
    position:absolute; 
 
    right:0; 
 
}

<script src="https://cdn.jsdelivr.net/ace/1.2.3/noconflict/ace.js"></script> 
 
<div id="editor">var i=30; 
 
var j=70;</div> 
 
<input type="range" id="range" oninput="changeElement(this)">

Wie kann ich den Wert einer Zahl korrekt ändern und den Verlauf im ace Editor behalten?

Answer 1

Ok, die Lösung fand ich ein wenig komplizierter als erwartet:

var elem = undefined; 
var rn = undefined; 
function changeElement(range){ 
    if(rn) editor.session.replace(rn,range.value); //input value into range text 
} 
editor.on("mousemove",function(e){ 
    if(e.domEvent.target.classList.contains("ace_numeric")){ 
     elem = e.domEvent.target; 
     var position = e.getDocumentPosition(); 
     var token = editor.session.getTokenAt(position.row, position.column+1); 
     if(token.value.match(/^[+-]?[.\d]+$/)) //token value is a number 
      rn = new Range(position.row, token.start, position.row, token.start+elem.textContent.length); //range of text in editor 
    } 
}); 

Statt das zu ersetzen, dom-Element, speichern Sie die Bereichsposition onmousedown und ersetzen Sie den Text, wenn sich der Eingabebereich ändert.

Answer 2

Sie müssen den Inhalt des Editors über die Editoren-Benutzeroberfläche ändern, nicht durch Ändern des Doms im Editor. Eine, leicht chaotisch, ist dies mit editor.replace. Sie können die regex/Parameter optimieren, wie Sie sehen, passen:

var editordiv = document.getElementById("editor"); 
 
var editor = ace.edit("editor"); 
 
editor.getSession().setMode("ace/mode/javascript"); 
 

 
function changeElement (range) { 
 
    editor.replace('=' + range.value + ';', {needle: /=\d+;/}); 
 
}

#editor{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.ace_constant { 
 
    pointer-events:auto !important; 
 
} 
 
#range{ 
 
    position:absolute; 
 
    right:0; 
 
}

<script src="https://cdn.jsdelivr.net/ace/1.2.3/noconflict/ace.js"></script> 
 
<div id="editor">var i=80;</div> 
 
<input type="range" id="range" oninput="changeElement(this)">