18

ブートストラップで codemirror 3 を使用しています。私のブートストラップモーダルにはテキストエリアがあり、それをコードミラーに置き換えています。task_name_editor.setValue('initial value')入力でコードミラーを初期化するために使用しています。問題は、コンテンツがそこにあることですが、クリックするか、フォーカスされている間に任意のキーを押すまで表示されません。

同様の質問に対するMarijnの回答を試しましたが、どこに配置すればよいかわかりませんtask_name_editor.refresh()

モーダルを表示する場所に配置してみました-

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

それでも、それは機能していません 誰でもこの問題を解決する方法を教えてもらえますか?

4

10 に答える 10

9

おそらくよりクリーンなソリューションですか？

Bootstrap モーダルには、モーダルが表示された後に発生するイベントがあります。Bootstrap 3 では、これはshown.bs.modal.

modal.on('shown.bs.modal', function() {
    // initialize codemirror here
});
于 2014-04-25T07:02:19.507 に答える
5

Code Mirror アドオンの自動更新を使用できるようになりました: https://codemirror.net/doc/manual.html#addon_autorefresh

スクリプトの依存関係を含めるだけです

<script src="../display/autorefresh.js" %}"></script>
これにより、コンテンツを表示した直後に一度だけ自動更新するオプション「autoRefresh」が提供されます。 
var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{
  autoRefresh: true,
});

ドキュメントには、非表示のコンテンツを表示した後、250 ミリ秒の時間遅延も記載されています。大量のコンテンツをロードしている場合は、遅延を増やすことができます。

于 2016-02-29T20:48:57.060 に答える
0

（角度、ブートストラップ）次のように、単純なタイムアウトで解決しました：

<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-11T14:12:00.260 に答える
0

毎回更新されるのを避けるために (位置と変更が失われることを意味します)、次のように使用することを強くお勧めします。

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

私はとてもいい人なので、MITライセンスの下にあります

于 2016-11-02T00:54:49.517 に答える
0

一般的なブートストラップに関して同様の問題があります(特にモーダルではありません)。ただし、私の解決策は、(ドキュメントの準備完了イベントではなく) できるだけ早く 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-21T12:50:16.103 に答える