javascript – CodeMirror的Bootstrap选项卡

前端之家收集整理的这篇文章主要介绍了javascript – CodeMirror的Bootstrap选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常复杂的页面,我在选项卡中的隐藏选项卡中有许多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中查看我的更改// – >评论

猜你在找的JavaScript相关文章