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

How should I change elements content on ace editor?

本文关键字：元素 编辑器 何更改 ace 我应该      更新时间：2023-09-26

我正在尝试使用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 编辑器中保留历史记录？

好的

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

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

您需要通过编辑器界面更改编辑器的内容，而不是通过在编辑器中修改 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)">

相关文章：