codemirror-textarea có thể thay đổi kích thước giống như văn bản tiêu chuẩn

Question

Có ai biết cách làm cho một vùng văn bản mã hóa có thể thay đổi kích thước như vùng văn bản không?

Để có thể thay đổi kích cỡ vùng văn bản của bảng mã bằng cách kéo góc lấy xuống dưới cùng của chúng.

Tôi biết rằng có thể cho divs html (xem div resizable like text-area) nhưng tôi đã không quản lý để đạt được điều tương tự trên gương mã.

Answer 1

Một số Googling cho thấy rằng nó là not supported in CodeMirror nhưng bạn có thể achieve it với jQuery UI:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
}); 
$('.CodeMirror').resizable({ 
    resize: function() { 
    editor.setSize($(this).width(), $(this).height()); 
    } 
}); 

Answer 2

Bạn đã thử những gì?

Tôi chỉ cần tải ảnh chụp sự phát triển của CodeMirror từ http://codemirror.net/

Chạy complete.html từ thư mục demo có một vùng văn bản resizeable đẹp (trong trình duyệt Chrome của tôi). Trong thực tế, ít nhất một số bản demo khác cũng có văn bản thay đổi được.

Nếu điều này không trả lời được câu hỏi của bạn, vui lòng cập nhật thông tin cụ thể hơn về những gì bạn đã thử và những gì không hiệu quả.

Answer 3

tôi đã this little example.

Lưu ý rằng điều này chỉ thay đổi kích thước theo chiều dọc, đó có lẽ là những gì bạn thực sự muốn? Khả năng thay đổi kích thước theo chiều ngang của textarea bình thường có xu hướng phá vỡ bố trí - thường dễ dàng hơn để đưa ra bố cục nơi trình chỉnh sửa có chiều rộng cố định và nội dung bên dưới được đẩy xuống nếu bạn đổi kích thước.

Tôi chưa thấy thiết kế mà bạn dự định cho phù hợp, vì vậy tôi đoán vậy.

Nó không quá khó để sửa đổi điều này và có được một widget thay đổi kích thước làm việc mà làm việc trong cả hai hướng mặc dù, nếu đó là những gì bạn muốn.

Answer 4

let CodeMirrorCustomResize = (params) => { 
    var start_x, start_y, start_h, 
     minHeight = params && params.minHeight ? params.minHeight : 150, 
     resizableObj = params && params.resizableObj ? params.resizableObj : '.handle' 

    let onDrag = (e) => { 
     sqlEditor.setSize(null, `${Math.max(minHeight, (start_h + e.pageY - start_y))}px`); 
    } 

    let onRelease = (e) => { 
     $('body').off("mousemove", onDrag); 
     $(window).off("mouseup", onRelease); 
    } 

    $('body').on("mousedown", resizableObj, (e) => { 
     start_x = e.pageX; 
     start_y = e.pageY; 
     start_h = $('.CodeMirror').height(); 

     $('body').on("mousemove", onDrag); 
     $(window).on("mouseup", onRelease); 
    }); 
} 

Nếu ai đó quan tâm đến phiên bản jQuery ngắn hơn và nhiều hơn nữa của câu trả lời @ mindplay.dk (btw. Cảm ơn điều này).