Có tùy chọn để thêm một tay cầm vào cửa sổ trình chỉnh sửa ACE để làm cho kích thước của cửa sổ trình chỉnh sửa có thể thay đổi bởi người kết thúc không? Tôi đã cố gắng sử dụng interactjs.io và áp dụng resizable (true) vào lớp .ace_content nhưng không có hiệu lực. Cách ưa thích ở đây là gì?Làm cho trình chỉnh sửa ACE có thể thay đổi kích thước
Không có tùy chọn không có hộp cho điều này, và trình thay đổi css không hoạt động vì nó bị ẩn sau thanh cuộn cũng trình chỉnh sửa không thể phát hiện khi kích thước của nút dom chứa được thay đổi.
Tuy nhiên thêm giải pháp tùy chỉnh rất đơn giản thấy https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262 kiếm một cách đơn giản để làm việc đó hoặc sử dụng jquery thay đổi kích thước như https://stackoverflow.com/a/24336105/1743328 gợi ý
Ít nhất từ phiên bản 1.2.3+ (Tôi đã không cố gắng những lần trước), bạn có thể sử dụng:
editor.setAutoScrollEditorIntoView(true);
Trình chỉnh sửa Ace sẽ điền vào vùng chứa.
Bạn có thể làm (ngôn ngữ mỏng):
.editor style="resize:vertical; overflow:auto;"
Và trong coffesscript:
$ ->
ace.config.set('basePath', '/assets/ace-builds/src')
$('.editor').each ->
editor = ace.edit(this)
Và cháy, sự kiện này khi thay đổi kích thước div:
# make editor resizable
window.dispatchEvent(new Event('resize'))
Tất cả các câu trả lời trên ở đây là cụ thể để xử lý thay đổi kích thước trong JS, nhưng không có địa chỉ nào trong số chúng giải quyết cách bạn thực sự có thể thêm hoặc thiết lập thay đổi kích thước (như sử dụng CSS3 Thay đổi kích thước thuộc tính sẽ được ẩn sau thanh cuộn)
Đây là giải pháp của tôi để thay đổi kích thước cửa sổ Ace Editor mà không cần jitter, sử dụng jQuery UI, hoặc bất kỳ libs bổ sung nào khác (vì đó chỉ là bloat bổ sung).
Việc kéo được xử lý bởi div cao 2px, trên bộ công cụ được chỉnh sửa opacity thành 0 trên trình chỉnh sửa và sau đó quay lại 1 khi di chuột lên.
Điều này về cơ bản dẫn đến div trình bao bọc hiển thị trong khi kéo và sau đó ẩn sau đó. Lợi nhuận!
var editor = ace.edit("smyles_editor");
var dragging = false;
var wpoffset = 0;
// If using WordPress uncomment line below as we have to
// 32px for admin bar, minus 1px to center in 2px slider bar
// wpoffset = 31;
editor.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
editor.getSession().setMode({ path: "ace/mode/php", inline: true });
$('#smyles_dragbar').mousedown(function (e) {
\t e.preventDefault();
\t window.dragging = true;
\t var smyles_editor = $('#smyles_editor');
\t var top_offset = smyles_editor.offset().top - wpoffset;
\t // Set editor opacity to 0 to make transparent so our wrapper div shows
\t smyles_editor.css('opacity', 0);
\t // handle mouse movement
\t $(document).mousemove(function (e) {
\t \t var actualY = e.pageY - wpoffset;
\t \t // editor height
\t \t var eheight = actualY - top_offset;
\t \t
\t \t // Set wrapper height
\t \t $('#smyles_editor_wrap').css('height', eheight);
\t \t
\t \t // Set dragbar opacity while dragging (set to 0 to not show)
\t \t $('#smyles_dragbar').css('opacity', 0.15);
\t \t
\t });
});
$(document).mouseup(function (e) {
\t if (window.dragging)
\t {
\t \t var smyles_editor = $('#smyles_editor');
\t \t var actualY = e.pageY - wpoffset;
\t \t var top_offset = smyles_editor.offset().top - wpoffset;
\t \t var eheight = actualY - top_offset;
\t \t $(document).unbind('mousemove');
\t \t
\t \t // Set dragbar opacity back to 1
\t \t $('#smyles_dragbar').css('opacity', 1);
\t \t
\t \t // Set height on actual editor element, and opacity back to 1
\t \t smyles_editor.css('height', eheight).css('opacity', 1);
\t \t
\t \t // Trigger ace editor resize()
\t \t editor.resize();
\t \t window.dragging = false;
\t }
\t
});body {
margin: 40px;
}
#smyles_editor {
height: 300px;
}
#smyles_editor_wrap {
\t background-color: #cccccc;
\t border-bottom: 1px solid #222222;
}
#smyles_dragbar {
\t background-color: #222222;
\t width: 100%;
\t height: 2px;
\t cursor: row-resize;
\t opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
Vertically Resizable Ace Editor
</h2>
<br/>
<div id="smyles_editor_wrap">
\t <div id="smyles_editor">function foo($awesome) {
\t $x = 'Smyles make resizable window for youuuuu!';
\t if($awesome === TRUE){
\t \t $x = 'Enjoy!';
\t }
\t return x;
}</div>
\t <div id="smyles_dragbar"></div>
</div>
này cũng hoạt động trên thay đổi kích thước .. 1 – user3791775