我应该如何更改 ace 编辑器上的元素内容？

Question

我正在尝试使用 input type=range 更改 ace 编辑器上某些元素中的文本，但是当我再次尝试编写时，编辑器会返回到使用 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)">

如何正确更改数字的值并将历史记录保留在 ace 编辑器中？

Answer 1

好的，我找到的解决方案比预期的要复杂一点：

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

不是替换dom元素，而是保存范围位置onmousedown，当输入范围改变时替换文本。

Answer 2

你需要通过编辑器界面来改变编辑器的内容，而不是通过修改编辑器内的dom。一种，有点混乱的方法是使用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)">