使用Codemirror時遇到問題。正確的語法來執行merge.js中的命令

Question

我想開發一個在線比較工具。目前它顯示了這兩個文件之間的差異。 我還需要以前的差異和下一個差異功能。 根據文檔，它有命令「goNextDiff」和「goPrevDiff」。我粘貼了相關的代碼。面板1和麪板2由ajax調用填充。我得到的內容和差異顯示在面板中。我只想一次點擊下一個差異按鈕時應該進入下一個差異。 我有兩個嘗試執行這些命令的按鈕。我不確定它的語法。

</div> 
    <!-- JS code for the second panel --> 
    <div id="panel1" style="display:none"> 

    </div> 
    <!-- the placehorder for the merge/kdiff interface --> 
    <div id="placeholder"></div> 
    </body> 
    <button id = "prevdiff" disabled onclick> Previous Difference </button> 
    <button id = "nextdiff" disabled> Next Difference </button> 
    <script type="text/javascript"> 
    dv = CodeMirror.MergeView(document.getElementById("placeholder"), { 
    value: a1[0], 
    orig: a2[0], 
    lineNumbers: true, 
    mode: "javascript", 

    highlightDifferences: true 
    }); 

    var prev = document.getElementById("prevdiff"); 
    var next = document.getElementById("nextdiff"); 
    prev.disabled = false; 
    next.disabled = false; 
    prev.onclick = function(){ console.log("prevdiff"); this.execCommand("goPrevDiff"); console.log("prevdiff1");}; 
    next.onclick = function(){ console.log("nextdiff"); this.goNextDiff; console.log("nextdiff1");}; 




    }); 
</script> 

Answer 1

您應該能夠執行goNextDiff和使用上CodeMirror對象（link），將execCommand方法goPrevDiff命令。在你的情況CodeMirror實例MerveView對象的編輯成員可變DV引用的，所以你將不得不撥打：

dv.edit.execCommand("goNextDiff"); 
dv.edit.execCommand("goPrevDiff"); 

當然，這隻會改變編輯器中的光標位置。我沒有找到突出特定塊的方法，這就是爲什麼在我自己的項目（https://easydiff.com）中，我使用了2個獨立的CodeMirror實例和託管的差異計算以及用我自己的代碼突出顯示的塊。