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

Question

我正在尝试使用 input type=range 更改 ace 编辑器上某些元素中的文本，但是当我尝试再次编写时，编辑器 returns 变为使用 [ 修改之前的先前值=26=]

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

您需要通过编辑器界面更改编辑器的内容，而不是在编辑器中修改dom。一种稍微麻烦的方法是使用 editor.replace。您可以根据需要调整 regex/parameters：

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

Answer 2

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

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 元素，而是在鼠标按下时保存范围位置，并在输入范围更改时替换文本。

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

How should I change elements content on ace editor?

javascript

ace-editor