我有一个非常复杂的页面,我在选项卡中的隐藏选项卡中有许多CodeMirror实例.为了使它更复杂,我记得最后一个活动标签.
我已经设法让它工作一半(http://codepen.io/anon/pen/LheaF)问题出现在Second Editor选项卡中:
>在单击主Code Mirror选项卡之前加载第二个选项卡.当您单击“代码镜像”选项卡时,它也不会正确加载编辑器,直到您单击两次.
>我希望第二个选项卡调用refresh()方法(如果已经启动),就像我对主编辑器一样.
>其中复制辅助编辑器的Bug
(function($) { var mainEditor; function initMainCodeEditor() { if (mainEditor instanceof CodeMirror) { mainEditor.refresh(); } else { // Load main editor var el = document.getElementById("codifyme"); mainEditor = CodeMirror.fromTextArea(el,{ lineNumbers: true }); mainEditor.setSize('100%',50); } } function initSecondaryCodeEditor() { var $active = $('#code_mirror_editors > .active > a'); var $sec_tab = $($active.data('target')); CodeMirror.fromTextArea($sec_tab.find('textarea')[0],{ lineNumbers: true }); } $(document).ready(function() { // Only load editors if tab has been clicked $('#maintabs > li > a[data-target="#codemirror"]').on('shown.bs.tab',function(e) { initMainCodeEditor(); }); $('#code_mirror_editors > li > a[data-toggle="tab"]').on('shown.bs.tab',function(e) { initSecondaryCodeEditor(); }); // Remember tabs var json,tabsState; $('a[data-toggle="tab"]').on('shown.bs.tab',function(e) { tabsState = localStorage.getItem("tabs-state"); json = JSON.parse(tabsState || "{}"); json[$(e.target).parents("ul.nav.nav-pills,ul.nav.nav-tabs").attr("id")] = $(e.target).data('target'); localStorage.setItem("tabs-state",JSON.stringify(json)); }); tabsState = localStorage.getItem("tabs-state"); json = JSON.parse(tabsState || "{}"); $.each(json,function(containerId,target) { return $("#" + containerId + " a[data-target=" + target + "]").tab('show'); }); $("ul.nav.nav-pills,ul.nav.nav-tabs").each(function() { var $this = $(this); if (!json[$this.attr("id")]) { return $this.find("a[data-toggle=tab]:first,a[data-toggle=pill]:first").tab("show"); } }); }); // doc.ready })(jQuery);
解决方法
问题:
>可能会在一个不可见的元素上创建CodeMirror(其中一个父元素显示为:none).这打破了CodeMirror完成的各种计算
>通过从CodeMirror容器元素获取CodeMirror实例,我们可以每次调用刷新(通过查找textarea旁边的.CodeMirror)
>固定为2的副作用.
请在此处查看更新版本:http://codepen.io/lloiser/pen/arBkv
您可以在codepen中查看我的更改// – >评论