Nội dung Codemirror không hiển thị trong phương thức bootstrap cho đến khi nó được nhấp vào

Tôi đang sử dụng codemirror 3 với bootstrap. Trong phương thức bootstrap của tôi, có một vùng văn bản, và tôi đang thay thế nó bằng codemirror. Tôi đang sử dụng task_name_editor.setValue('initial value') để khởi tạo bộ mã hóa bằng đầu vào. Vấn đề là nội dung ở đó, nhưng nó không hiển thị cho đến khi nó được nhấn hoặc bất kỳ phím nào được nhấn trong khi nó được lấy nét.Nội dung Codemirror không hiển thị trong phương thức bootstrap cho đến khi nó được nhấp vào

Tôi cố gắng trả lời Marijn để một câu hỏi tương tự, nhưng tôi không biết được nơi để đặt task_name_editor.refresh()

Tôi đã cố gắng đặt nó nơi tôi hiển thị các phương thức -

$('#edit_task_modal').modal('show'); 
task_name_editor.setValue('initial value'); 
task_name_editor.refresh();

thậm chí sau đó, nó không phải là làm việc Xin vui lòng bất cứ ai có thể hiển thị như thế nào để khắc phục vấn đề này?

Nguồn

2013-06-13 Parin Porecha

Được rồi, tôi tìm thấy giải pháp - '$ ('# edit_task_modal'). phương thức ('show'); $ ('# edit_task_modal'). On ('hiển thị', hàm() { task_name_editor.refresh() }) ' Nhưng vẫn còn, có thể thấy được độ trễ khi codemirror được điền bởi nội dung. Nếu có ai có cách tiếp cận tốt hơn, vui lòng chia sẻ –

Điều này rất hay, cảm ơn giải pháp. – Neron

Tôi gặp sự cố tương tự liên quan đến bootstrap nói chung (không cụ thể với các phương thức). Tuy nhiên, giải pháp của tôi là đảm bảo rằng tôi đã tạo trình soạn thảo mã hóa càng sớm càng tốt (thay vì trên sự kiện sẵn sàng của tài liệu). Tôi đoán điều này có một cái gì đó để làm với cách bootstrap tính toán chiều rộng và chiều cao trong lưới điện.

<body> 
    <!-- my page content --> 

    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     // Create the code editor here rather than on document.ready 
     editor = CodeMirror(...); 
    </script> 
</body>

Nguồn

2013-11-21 12:50:16 pqvst

nơi bạn đã gọi editor.refresh()? –

@ParinPorecha Tôi không phải gọi làm mới ở tất cả thực sự – pqvst

Vấn đề của tôi là tôi có trình chỉnh sửa ẩn sau tab khởi động khi khởi động và dường như ẩn nội dung của trình chỉnh sửa cho đến khi tôi thực sự chỉnh sửa. Thật không may, cả hai giải pháp này đều không hoạt động cho tôi - hoặc tạo trình soạn thảo ASAP, cũng không gọi refresh (cả hai cùng nhau). Vẫn còn trên Lookout cho một workaround khác ... –

Tôi đã gặp sự cố rất giống với CodeMirror: nếu nó được khởi tạo trong khi đó không phải là tab khởi động hoạt động, nó sẽ không hiển thị bất kỳ nội dung nào. Cách giải quyết của tôi ngược lại với @pbergqvist - để khởi tạo điều khiển CodeMirror càng muộn càng tốt, tức là sau khi tab được đề cập đã được chọn. Sử dụng TypeScript, nó trông giống như thế này:

var tabClicked = $.Deferred(); 
$('#scriptTab').click(() => tabClicked.resolve()); 
$.ajax('/api/script') 
    .done(script => { 
     this.tabClicked.done(() => { 
      setTimeout(()=> { 
       var codeMirror = CodeMirror.fromTextArea($('#script')[0]); 
       codeMirror.getDoc().setValue(script); 
      }, 10); 
     }); 
    }) 
    .fail(err=> console.error('Error retrieving script: ' + JSON.stringify(err)));

Hy vọng điều này sẽ giúp ai đó.

Nguồn

2014-01-10 21:10:25

Tôi thấy nó có liên quan đến thay đổi kích thước khung nhìn trong khi các tab bị ẩn và hiển thị lại. Vì vậy, sau đây làm việc cho tôi:

1) Nghe cho các nhấp chuột trên các tab 2) Khi được nhấp, gọi làm mới() trên tất cả các biên tập viên CM hay chỉ là một bên trong một tab, như bạn thích

Điều quan trọng của lưu ý rằng refresh() phải được gọi với thời gian chờ nhỏ, nếu không trong một số trình duyệt (tôi đã nhận được điều này trong Chrome), trình chỉnh sửa sẽ được hiển thị, nhưng với một số khoảng không hợp lệ.

Hãy thử một cái gì đó như thế này:

$(document).ready(function() { 
    $("#your_nav_tabs a").click(function(e) { 
     if(window.codeMirrorInstances != null) { // window.codeMirrorInstances must be initialized and tracked manually 
      $.each(window.codeMirrorInstances, function(index, cm) { 
       setTimeout(function() { 
        cm.refresh(); 
       }, 100); 
      }); 
     } 

     return false; 
    }); 
});

Nguồn

2014-03-16 14:25:56 Denis

Một giải pháp sạch hơn có lẽ?

Các phương thức khởi động có sự kiện kích hoạt sau khi phương thức được hiển thị. Trong Bootstrap 3, đây là shown.bs.modal.

modal.on('shown.bs.modal', function() { 
    // initialize codemirror here 
});

Nguồn

2014-04-25 07:02:19 ncabral

Với sự giúp đỡ từ this question, tôi đã có thể để có được một trình soạn thảo CodeMirror, được ngồi trong một không hoạt động tab bootstrap 3 và do đó không hoàn toàn khởi tạo và làm mới nó khi tab được nhấp. Có thể ai đó thấy nó hữu ích.

Coffeescript phiên bản:

$('a[data-toggle="tab"]').on 'shown.bs.tab', (e) -> 
    target = $(e.target).attr("href") # activated tab 
    $(target + ' .CodeMirror').each (i, el) -> 
    el.CodeMirror.refresh()

Nguồn

2014-05-24 14:11:36 Brett

(góc, bootstrap) Tôi chỉ giải quyết nó với một thời gian chờ đơn giản, như thế này:

<button class="btn btn-default pull-right margin" data-toggle="modal" data-target="#codesnippetmodal" ng-click="getcodesnippet(module)"> 
open modal 
</button>

và sau đó trong bộ điều khiển của tôi:

$scope.getcodesnippet = function(module) { 
    var clientmodule = { 
     clientid: $rootScope.activeclient.id, 
     moduleid: module.id 
    } 
    Data.post('getCodesnippet', { 
     clientmodule: clientmodule 
    }).then(function(results) { 

     codesnippet_editor.setValue(results.codesnippet); 
     setTimeout(function() { 
      codesnippet_editor.refresh(); 
     }, 500); 
    }); 
}

Nguồn

2015-01-11 14:12:00

Nếu bạn khởi tạo trình soạn thảo về sự kiện được hiển thị phương thức, sự cố sẽ được giải quyết. Chỉ cần đặt tập lệnh này trên trang gốc.

$('#myModal').on('shown', function() { 
    CodeMirror.fromTextArea(document.getElementById('MyTextArea'), { mode: 'xml', lineNumbers: true }); 
});

Nguồn

2015-05-28 12:38:40

Bây giờ bạn có thể sử dụng Bộ luật Gương addon Auto Refresh: https://codemirror.net/doc/manual.html#addon_autorefresh

Chỉ cần bao gồm các phụ thuộc kịch bản

<script src="../display/autorefresh.js" %}"></script>

Mà bây giờ cung cấp cho bạn tùy chọn "autoRefresh" để tự động làm mới chỉ một lần ngay sau khi hiển thị nội dung.

var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{ 
 
    autoRefresh: true, 
 
});

Các tài liệu cũng nêu nó một sự chậm trễ 250ms thời gian sau khi hiển thị nội dung ẩn. Bạn có thể tăng độ trễ đó nếu bạn đang tải nhiều nội dung.

Nguồn

2016-02-29 20:48:57 Josh

để tránh bị làm mới mỗi thời gian (có nghĩa là vị trí và thay đổi mất) i khuyên cho việc sử dụng như thế này:

$('#meinetabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
{ 
    if (var5 !=="5") 
     { 
      editor_htaccess.refresh(); 
     } 
    var5 = "5"; 
})

của nó theo giấy phép MIT vì tôi như một người đẹp

Nguồn

2016-11-02 00:54:49

Nội dung Codemirror không hiển thị trong phương thức bootstrap cho đến khi nó được nhấp vào

Trả lời

Các vấn đề liên quan