エースエディタで要素のコンテンツを変更するにはどうすればよいですか？

Question

それはjavascriptの

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

で改変された前に、私は input type=rangeでエースエディタ上のいくつかの要素のテキストを変更しようとしていますが、私は再び書き込みしようとすると、以前の値に、エディタに戻ります

数値の値を正しく変更し、履歴をエースエディタに保存するにはどうすればよいですか？

Answer 1

[OK]を、私が見つけた解決策は、予想よりも少し複雑です：

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

の代わりに置き換えます入力範囲が変更されたときに範囲位置onmousedownを保存し、テキストを置き換えます。

Answer 2

エディタ内のdomを変更するのではなく、エディタインターフェイスを使用してエディタの内容を変更する必要があります。 1つ、少し厄介な、これを行う方法はeditor.replaceです。あなたが合うようにあなたが正規表現/パラメータを微調整することができます

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