在单击之前，Codemirror 内容在引导模式中不可见答案

【问题标题】：Codemirror content not visible in bootstrap modal until it is clicked在单击之前，Codemirror 内容在引导模式中不可见
【发布时间】：2013-06-13 11:59:34
【问题描述】：

我正在使用带有引导程序的 codemirror 3。在我的引导模式中，有一个 textarea，我用 codemirror 替换它。我正在使用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();

即使这样，它也无法正常工作请问谁能告诉我如何解决这个问题？

【问题讨论】：

好的，我找到了解决方案 - $('#edit_task_modal').modal('show'); $('#edit_task_modal').on('shown', function() { task_name_editor.refresh() }) 但是，当 codemirror 被内容填充时，仍然存在明显的滞后。如果有人有更好的方法，请分享
这很好，感谢您的解决方案。
当我们将编辑器放在materializecss modal上时，它也不能直接工作。同样的效果，文本只有在我们点击编辑器时才可见。下面的“自动刷新”答案为我解决了这个问题。

标签： twitter-bootstrap codemirror

【解决方案1】：

也许是更清洁的解决方案？

引导模式有一个在显示模式后触发的事件。在 Bootstrap 3 中，这是shown.bs.modal。

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

【讨论】：

当编辑器不可见时，刷新似乎没有表现 -> 你的建议在使用刷新时是正确的 - 这样你可以在不可见的情况下做任何你想做的事情，并在打开时刷新 +1

【解决方案2】：

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

只包含脚本依赖

&lt;script src="../display/autorefresh.js" %}"&gt;&lt;/script&gt;

现在，您可以选择“autoRefresh”，以便在显示内容后立即自动刷新一次。

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

文档还声明它在显示隐藏内容后有 250 毫秒的时间延迟。如果您要加载大量内容，则可以增加该延迟。

【讨论】：

我在精简应用程序中显示编辑器时遇到了类似的问题。像这样添加自动刷新插件为我解决了这个问题。

【解决方案3】：

我认为这与选项卡隐藏并再次显示时视口大小的变化有关。所以以下对我有用：

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

【讨论】：

【解决方案4】：

在this question 的帮助下，我能够获得一个 CodeMirror 编辑器，它位于非活动的 bootstrap 3 选项卡中，因此未完全初始化，并在单击选项卡时刷新它。也许有人觉得它有用。

咖啡脚本版本：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我在一般的引导方面遇到了类似的问题（不是专门针对模态）。但是，我的解决方案是确保尽早创建代码镜像编辑器（而不是在文档的就绪事件上）。我猜这与 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>

【讨论】：

@ParinPorecha 实际上我根本不需要调用刷新
我的问题是我在启动时将编辑器隐藏在引导选项卡后面，这似乎隐藏了编辑器的内容，直到我真正进行编辑。不幸的是，这两种解决方案都不适合我——要么尽快创建编辑器，要么调用刷新（也不能同时调用）。仍在寻找另一种解决方法...

【解决方案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)));

希望这对某人有所帮助。

【讨论】：

【解决方案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);
    });
}

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案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();
});

【讨论】：