Ace編輯器可以在一個頁面中支持多個代碼編輯器嗎？

我正在尋找一種網頁應用程序，它在一個屏幕上以2個不同的代碼編輯器爲特色的「編碼競爭」風格的界面。一個將只讀，另一個將被激活並允許用戶編輯。Ace編輯器可以在一個頁面中支持多個代碼編輯器嗎？

我目前使用Ace編輯器，我覺得它很棒，使用起來也很簡單。

但是，這是我的問題。 我試圖在單個頁面中實現2個不同的編輯器時，似乎出現錯誤。

Uncaught RangeError: Maximum call stack size exceeded

是在JS腳本變量「主編」一個限制詞或無關緊要的變量名是幹什麼用的？

這裏是我的代碼在我的JS文件：

var editorFirst = ace.edit("editorFirst"); 
var editorSecond= ace.edit("editorSecond"); 
setupEditor(); 

function setupEditor() { 
    editorFirst.setTheme("ace/theme/eclipse"); 
    editorFirst.getSession().setMode("ace/mode/javascript"); 
    editorFirst.setShowPrintMargin(false); 
    editorFirst.setHighlightActiveLine(true); 
    editorFirst.resize(); 
    editorFirst.setBehavioursEnabled(true); 
    editorFirst.getSession().setUseWrapMode(true); 
    document.getElementById('editorFirst').style.fontSize = '14px'; 

    editorSecond.setTheme("ace/theme/eclipse"); 
    editorSecond.getSession().setMode("ace/mode/javascript"); 
    editorSecond.setShowPrintMargin(false); 
    editorSecond.setHighlightActiveLine(true); 
    editorSecond.resize(); 
    editorSecond.setBehavioursEnabled(true); 
    editorReducer.getSession().setUseWrapMode(true); 
    document.getElementById('editorSecond').style.fontSize = '14px'; 
}

這裏是我的HTML文件代碼：

<script src="../assets/js/main.js"></script> 
<script src="../assets/js/src/ace.js" type="text/javascript" charset="utf-8"></script> 
<div id="editorFirst"></div> 
<div id="editorSecond"></div>

在此先感謝您的答覆！

來源

2013-03-27 kenwjj

也許你可以考慮具有獨立的I幀的編輯2？ – techfoobar 2013-03-27 15:19:35

Ace可以支持任意數量的editors。問題是最近regression打破resize與height=0編輯看到this demo

來源

2013-03-27 21:44:03

非常感謝！不知道css屬性會導致這種情況。謝謝！ – kenwjj 2013-03-28 05:00:04

是的，它可以支持。看看我的例子http://jsfiddle.net/igos/qLAvN/

$(function() { 
    var editor1 = ace.edit("editor1"); 
    editor1.getSession().setMode("ace/mode/java"); 

    var editor2 = ace.edit("editor2"); 
    var editor3 = ace.edit("editor3"); 
    $("#accordion").accordion({ 
     fillSpace: true, 
     change: function() { 
      $(editor1).resize(); 
      $(editor2).resize(); 
      $(editor3).resize(); 
     } 
     }); 
});

來源

2013-06-06 07:42:08

我所做的，而不是使用ID編輯，我把它作爲一類這樣的代碼然後我每次迭代編輯什麼。

var editor; 
$('.editor').each(function(index) { 
    editor = ace.edit(this); 
    editor.getSession().setMode('ace/mode/csharp'); 
});

來源

2014-11-24 21:28:56 acrogenesis

完美主意...... – EN20 2015-09-12 12:05:54

這種方法可以使ulimited王牌編輯：

<pre class='editor' data-name='editor_1' id='editor_1'></pre> 
<input name='editor_1' type='hidden' value='' /> 

<pre class='editor' data-name='editor_2' id='editor_2'></pre> 
<input name='editor_2' type='hidden' value='' /> 

<pre class='editor' data-name='editor_3' id='editor_3'></pre> 
<input name='editor_3' type='hidden' value='' /> 


<script type="text/javascript"> 

$(document).ready(function(){ 

ace.require("ace/ext/language_tools"); 
var editor; 
var ednum = 0; 
ace_config = { 
    maxLines: Infinity, 
    enableBasicAutocompletion: true, 
    enableSnippets: true, 
    enableLiveAutocompletion: false 
}; 

$('.editor').each(function(index) { 
    ednum++; 
    _name = "editor_"+ednum; 
    code = "var name = $(this).data('name');" 
    +_name+" = ace.edit(this);" 
    +_name+".setTheme('ace/theme/chrome');" 
    +_name+".getSession().setMode('ace/mode/less');" 
    +_name+".setOptions(ace_config);" 
    +"var code_"+ednum+" = $('textarea[name='+name+']');" 
    +_name+".getSession().setValue($('input[name='+name+']').val());" 
    +_name+".getSession().on('change', function(){" 
    +"$('input[name='+name+']').val("+_name+".getSession().getValue());" 
    +"});"; 
    eval(code); 

}); 

</script>

演示：Unlimited Ace Editors

來源

2017-07-22 07:23:08 Aghaie

Ace編輯器可以在一個頁面中支持多個代碼編輯器嗎？

回答

相關問題