Geek asks and answers

CodeMirror and jQuery Tabs

I have a problem with jquery and codemirror tabs. Having done some searches here, I was recommended to call the codemirror update method when loading tabs, but if I do not click on the area, it will remain hidden. Attached html and script example

Any ideas?

 <script type="text/javascript">
          var editorCss;
          var htmlCss;
          $(function () {
              $("#tabs").tabs();

              var $tabs = $("#tabs").tabs({
                  select: function (e, ui) {
                      var thistab = ui;
                      runMethod(thistab.index);
                  }
              });       

              $('#code0').val('//test 0');
              $('#code1').val('//test 1');
              $('#code2').val('//test 2');

                  editorCss = CodeMirror.fromTextArea(document.getElementById("code1"), {});
                  htmlCss = CodeMirror.fromTextArea(document.getElementById("code2"), {});
          });


          function runMethod(tabindex) {
              switch (tabindex) {
                  case 1:
                      editorCss.refresh();
                      break;
                  case 2:
                      htmlCss.refresh();

                      break;
              }
          } 
    </script>



<body>
    <h1>CodeMirror: CSS mode</h1>
    <div id="tabs">
    <ul>
        <li><a href="#tabs-0">General</a></li>
        <li><a href="#tabs-1">Html</a></li>
        <li><a href="#tabs-2">CSS</a></li>

    </ul>
        <div id="tabs-0">
            <textarea id="code0" name="code0" rows="10" cols="10"></textarea>
        </div>
        <div id="tabs-1">
         <textarea id="code1" name="code1" rows="10" cols="10"></textarea>

        </div>
        <div id="tabs-2">
          <textarea id="code2" name="code2" rows="10" cols="10">hello 2</textarea>
        </div>
    </div>
  </body>
+3
source share
2 answers

It is old, but here you go ...

//Refresh editor when tab opens, syntax highlighter
    tabs.tabs({
        show: function(event, ui) {
            $('.processingide').each( function(i) {
                editor[i].refresh();
            });
        }
    });

Real-time examples can be seen here: http://mattlockyer.com/multimediaprogramming/

0
source

I did my search again and it helps ...

$('.nav-tabs a').on('shown.bs.tab', function(e) {
    $('.CodeMirror').each(function(i, el){
        el.CodeMirror.refresh();
    });
});
-1
source

More articles:


All Articles