twitter-bootstrap - 在单击之前，Codemirror 内容在引导模式中不可见

Question

我正在使用带有引导程序的 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();

即使那样，它也不起作用请任何人都可以展示如何解决这个问题？

score 9 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

只需包含脚本依赖项

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

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

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

在这个问题的帮助下，我得到了一个 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()

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

（角度，引导）我只是用一个简单的超时解决了它，像这样：

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

score 0 · Accepted Answer

I'm having a similar issue with regards to bootstrap in general (not specifically with modals). However, my solution was to make sure I created the codemirror editor as early as possible (rather than on the document's ready event). I'm guessing this has something to do with the way bootstrap calculates the widths and heights in the grid.

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

score 0 · Accepted Answer

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

希望这可以帮助某人。

score 0 · Accepted Answer

这对我有用：

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

score 0 · Accepted Answer

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

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

它在麻省理工学院许可下，因为我是一个很好的人

twitter-bootstrap - 在单击之前，Codemirror 内容在引导模式中不可见

10 回答 10

Related

Reference