jQuery UI 크기 조정 가능 구성 요소 안에 에이스 편집기 포함하기

크기를 조정할 수있는 구성 요소 안에 에이스 편집기를 삽입하여 크기를 조정할 수있게하려고합니다. jQuery UI Resizable 구성 요소를 사용하려고했지만 크기를 조정할 수있는 구성 요소 안에 에이스 편집기를 표시 할 수 없습니다.jQuery UI 크기 조정 가능 구성 요소 안에 에이스 편집기 포함하기

코드 :이 전체 공간을 채우도록

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <title>Resizable Ace Editor Using jQuery</title> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #resizable { width: 500px; height: 500px; padding: 5px; border: 3px solid red} 
    #resizable h3 { text-align: center; margin: 0; } 
    </style> 
    <script> 
    $(document).ready(function() { 
    editor = ace.edit('editor'); 
    editor.setTheme('ace/theme/monokai'); 
    editor.getSession().setMode('ace/mode/java'); 

    $("#resizable").resizable({ 
     maxHeight: 600, 
     maxWidth: 500, 
     minHeight: 500, 
     minWidth: 500 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="resizable"> 
    <h3 class="ui-widget-header">Ace Editor</h3> 
    <div id="editor"></div> 
</div> 


</body> 
</html>

나는 또한 에이스 편집기와 같은 컨테이너의 크기의 변화에 대응하고 자체의 크기를 조정 할 수있을 것입니다. 이게 jQuery UI로 가능합니까? 그렇지 않다면 어떻게해야합니까?

출처

2014-06-20 user3025403

크기 재조정 컨테이너가 사용할 수있는 공간의 양을 지정하려면 CSS를 사용하십시오.

#resizable { min-width: 500px; min-height: 500px; max-width: 100%; max-height: 100%; padding: 5px; border: 3px solid red}

가 인라인 스타일이 추가 :

당신의 스타일 라인 변경

이 컨트롤이 전체 컨테이너를 채울 수

#editor { position: absolute; top: 40px; padding: 5px; left:0; bottom:0; right: 0; }

을하지만, 최소 폭을 가지고 높이는 500px입니다.

변경 $("#resizable").resizable();

당신이 반응 템플릿을 원하는 경우에

최대/최소를 지정하지하려면 다음 크기 조정 호출, Bootstrap

출처

2014-06-20 18:42:33 bitwisebytefoolish

그러나, 에이스 편집기는 아직도 내부에 표시되지 않는 참조 호출하여 그것에 대해 편집기를 통지 "크기 조정." – user3025403

스크립트 및 스타일 시트 태그 시작 부분에 일부 http가 누락되었습니다 – bitwisebytefoolish

내 응답이 업데이트되어 크기 조정이 가능한 컨테이너에 나타납니다. – bitwisebytefoolish

체크 아웃 당신은 #editor 노드 #resizable와 같은 크기를 확인해야합니다 노드

<style> 
    #resizable{position: relative} 
    #editor{position: absolute; top:0;left:0;right:0;bottom:0;} 
    </style>

및 컨테이너 노드 ch Anges의, editor.resize();

$("#resizable").resizable({ 
     resize: function(event, ui) { 
     editor.resize(); 
     } 
    });

는 http://jsbin.com/ojijeb/645/edit이

출처

2014-06-20 21:43:46

jQuery UI 크기 조정 가능 구성 요소 안에 에이스 편집기 포함하기

답변

관련 문제