CodeMirror內容在引導模式下不可見，直到被點擊

我使用帶引導程序的codemirror 3。在我的引導模式中，有一個textarea，我用codemirror替換它。我正在使用task_name_editor.setValue('initial value')來用輸入初始化codemirror。問題在於內容在那裏，但直到它被點擊或在焦點被按下時才顯示。CodeMirror內容在引導模式下不可見，直到被點擊

我試圖Marijn的回答類似的問題，但我不知道在哪裏放置task_name_editor.refresh()

我試圖把它放在哪裏我顯示模式 -

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

即使是這樣，它不是工作請任何人都可以展示如何解決這個問題？

來源

2013-06-13 Parin Porecha

好吧，我發現解決方案 - '$（'＃edit_task_modal'）。modal（'show'）; （'＃edit_task_modal'）。on（'shown'，function（）{ task_name_editor.refresh（） }）' 但是，當內容填充codemirror時，仍然存在可見的滯後。如果有人有更好的方法，請分享 –

這是非常好的，謝謝你的解決方案。 – Neron

我有一個類似的問題關於自舉一般（不特別與模態）。但是，我的解決方案是確保儘早創建了codemirror編輯器（而不是文檔的準備事件）。我猜測這與引導程序計算網格中的寬度和高度的方式有關。

<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>

來源

2013-11-21 12:50:16 pqvst

你在哪裏調用了editor.refresh（）？ –

@ParinPorecha我沒必要實際調用刷新 – pqvst

我的問題是我在啓動時隱藏了引導選項卡後面的編輯器，這似乎隱藏了編輯器的內容，直到我實際進行編輯。不幸的是，這兩種解決方案都不適用於我 - 要麼儘快創建編輯器，也不要調用刷新（也不要一起調用）。仍在尋找另一種解決方法... –

我是有CodeMirror一個非常類似的問題：如果它，而它不是主動引導標籤被初始化，就不會顯示任何內容。我的解決方法與@pbergqvist相反 - 儘可能遲地初始化CodeMirror控件，即在選擇了標籤之後。使用TypeScript，它看起來有點像這樣：

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)));

希望這可以幫助別人。

來源

2014-01-10 21:10:25

我認爲它與視口尺寸變化有關，而標籤隱藏並再次顯示。所以下面的工作對我來說：

1）聽用於在標籤 2）點擊點擊，所有CM編輯或只是一個選項卡內調用刷新（），根據您的喜好

很重要要注意的是refresh（）必須用一個很小的超時來調用，否則在某些瀏覽器（我在Chrome中得到這個）時，會顯示編輯器，但是會有一些無效的偏移量。

嘗試這樣：

$(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; 
    }); 
});

來源

2014-03-16 14:25:56 Denis

一個清潔的解決方案吧？

Bootstrap模態有一個事件在模態顯示後觸發。在Bootstrap 3中，這是shown.bs.modal。

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

來源

2014-04-25 07:02:19 ncabral

與this question的幫助下，我能得到一個CodeMirror編輯器，它正坐在不活動的引導3選項卡，因此不能完全初始化，並刷新點擊選項卡時。也許有人認爲它很有用。

CoffeeScript的版本：

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

來源

2014-05-24 14:11:36 Brett

（角，引導）我只是一個簡單的超時時間解決它，就像這樣：

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

，然後在我的控制器：

$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); 
    }); 
}

來源

2015-01-11 14:12:00

如果初始化模態顯示的事件編輯器，問題將被解決。只需將此腳本放在父頁面上即可。

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

來源

2015-05-28 12:38:40

您現在可以使用代碼鏡像插件自動刷新：https://codemirror.net/doc/manual.html#addon_autorefresh

就包括腳本依賴

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

現在請您選擇「自動刷新」自動刷新只是在顯示內容後立即進行。

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

該文檔也說明其示出隱藏的內容之後的250ms的時間延遲。如果您正在加載大量內容，則可以延長該延遲時間。

來源

2016-02-29 20:48:57 Josh

，以避免被刷新一次，時間（意思是位置和改變丟失）我強烈建議使用這樣的：

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

在MIT許可它的，因爲我是一個很不錯的人

來源

2016-11-02 00:54:49

CodeMirror內容在引導模式下不可見，直到被點擊

回答

相關問題