Question

我正在使用带有bootstrap的codemirror 3。在我的bootstrap模式中，有一个textarea，我用codemirror替换它。我正在使用task_name_editor.setValue('initial value')初始化带有输入的codemirror。问题是内容在那里，但是在点击它或在聚焦时按下任何键之前它是不可见的。

我尝试过Marijn对类似问题的回答，但我不知道在哪里放置task_name_editor.refresh()

我尝试将它放在显示模态的位置 -

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

即使这样，它也无法正常工作请任何人都能说明如何解决这个问题？

Answer 1

也许更清洁的解决方案？

Bootstrap模态具有在显示模态后触发的事件。在Bootstrap 3中，这是shown.bs.modal。

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

Answer 2

在this question的帮助下，我能够获得一个CodeMirror编辑器，该编辑器位于非活动的bootstrap 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()

Answer 3

如果在模态显示事件上初始化编辑器，问题将得到解决。只需将此脚本放在父页面上即可。

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

Answer 4

您现在可以使用代码镜像插件自动刷新：https://codemirror.net/doc/manual.html#addon_autorefresh

只需包含脚本依赖项

＆＃13;

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

＆＃13;

＆＃13; 现在，它为您提供了选项＆＃34; autoRefresh＆＃34;在显示内容后立即自动刷新一次。

＆＃13;

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

＆＃13;

文档还显示隐藏内容后延迟250毫秒。如果要加载大量内容，可以增加延迟。

Answer 5

我认为它与视口大小更改有关，而标签被隐藏并再次显示。所以以下内容对我有用：

1）听取标签上的点击 2）点击后，在所有CM编辑器上调用refresh（），或者根据需要调用选项卡内的一个

重要的是要注意必须使用较小的超时调用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;
    });
});

Answer 6

我在引导程序方面遇到了类似的问题（不是专门用于模态）。但是，我的解决方案是确保尽早创建codemirror编辑器（而不是文档的ready事件）。我猜这与bootstrap计算网格中的宽度和高度的方式有关。

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

Answer 7

我遇到了与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)));

希望这有助于某人。

Answer 8

（角，自举）我刚刚用一个简单的超时解决了它，就像这样：

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

Answer 9

为了避免每次刷新（意味着位置和更改丢失）我强烈建议使用这样的方式：

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

它在MIT许可下，因为我是一个很好的人

Answer 10

这对我有用：

var myCodeMirror = CodeMirror(document.querySelector('.codemirror-init'), {
  value: 'Your Value',
  lineNumbers: true,
  tabSize: 2,
  mode: 'javascript',
  theme: 'monokai'
});

$('#exampleModal').on('shown.bs.modal', function() {
    // Refresh Code mirror Here
       myCodeMirror.refresh();
});

但是如果您的数据定期更新，您应该在模态启动后实现代码镜像中的值

$('#exampleModal').on('shown.bs.modal', function() {
    myCodeMirror.setValue('[Your Dynamic Value]');
    // Refresh Code mirror Here 
    myCodeMirror.refresh();
});

Codemirror内容在引导模式中不可见，直到单击它为止

10 个答案: