에이스 편집기에서 요소 내용을 어떻게 변경해야합니까?

Question

가 나는 input type=range와 에이스 편집기에 대한 몇 가지 요소에있는 텍스트를 변경하려고하지만 난 다시 쓰려고하면, 이전 값으로 편집기 수익률은 자바 스크립트

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

로 수정되기 전에

숫자의 값을 올바르게 변경하고 기록을 에이스 편집기에 보관하려면 어떻게해야합니까?

Answer 1

확인, 내가 찾은 해결책은 예상보다 조금 더 복잡하다 : 당신이 맞는 볼 당신은 정규식/매개 변수를 조정할 수 DOM 요소에서 범위 위치 onmousedown을 저장하고 입력 범위가 변경 될 때 텍스트를 바꿉니다.

Answer 2

편집기 내에서 dom을 수정하는 것이 아니라 편집기 인터페이스를 통해 편집기의 내용을 변경해야합니다. 하나, 약간 지저분한,이 방법은 editor.replace입니다.

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

을 대신 교체의 :

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