Ana editöre

ayarlamak için ace editörü almak Bir başka div içinde ace div var ve ace editörü genişlik ve yükseklik ayarlamak için ebeveyn div için istiyorum. Ben editor.resize() diyoruz ama hiçbir şey olmuyor.Ana editöre

<!DOCTYPE html> 
<html lang="en" style="height: 100%"> 
<head> 
<title>ACE in Action</title> 
<style type="text/css" media="screen"> 
    #editor { 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     height: 100px; 
    } 
</style> 
</head> 
<body style="height: 100%"> 
<div style="background-color: red; height: 100%; width: 100%;"> 
<div id="editor">function foo(items) { 
    var x = "All this is syntax highlighted"; 
    return x; 
}</div> 
</div> 

<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> 
<script> 
    var editor = ace.edit("editor"); 
    editor.setTheme("ace/theme/monokai"); 
    editor.getSession().setMode("ace/mode/javascript"); 

    editor.resize(); 
</script> 
</body> 
</html>

kaynak

2015-02-28 user441521

İki şekilde istediğiniz şeyi elde edebilirsiniz. As editörünü kapsayıcısına yeniden boyutlandırmak için kullanılan css ve javascript'i gösteren bir jsfiddle oluşturdum.

Kullanılan css, editörün kapsayıcının genişliğini ve yüksekliğini almasını sağlamaktır, böylece editor.resize(), editörün olması gereken boyutu uygun şekilde hesaplayabilir.

Çalıştırmak için editor.resize()'u almak için aşağıdakileri öneririm.

<style type="text/css" media="screen"> 
    #editor { 
     width: 100%; 
     height: 100%; 
    } 
</style>

Ancak size şu çalışacak #editor için belirlediğiniz geçerli css kullanarak korumak istiyorsanız.

<style type="text/css" media="screen"> 
    #editor { 
     position: absolute; /* Added */ 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 
</style>

ve kesinlikle konumlandırılır düzenleyici doğru şekilde kap içinde yer alacak şekilde, kaba position: relative; ekleyin. Bunun nasıl gelince ben sadece kullanarak bu başardınız jquery-ace kullanma Absolute positioning inside relative positioning.

kaynak

2015-09-24 01:05:09 scain

Mantığınız yüksekliğini değil genişliğini ayarlar. sağ? –

Hem yükseklik hem de genişlik ayarlanmalıdır. Hem yükseklik hem de genişlik% 100'dür. – scain

sevk:

$('#php_code').ace({ 
     theme: 'chrome', 
     lang: 'php', 
     width: '100%', 
     height: '300px' 
    })

kaynak

2017-07-17 02:19:10 kjdion84

Aynı şekilde jquery yapamazsınız, sadece "genişliğini" "% 100" olarak ayarlayınız. –

cevap

İlgili konular