Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to refresh codemirror when it's parent div style becomes display block?

I'm using codemirror with textareas in a tabbed interface, when i'm not in the tab that contains codemirror and then go to it, I get empty white space without line numbers or the cursor, when I refresh the page it works, I know it's because the tabs content is hidden using display: none; so how can I fix this issue ?

here's my code, (I'm also using jquery):

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
        lineNumbers: true,
        mode: text/html,
        enterMode: "keep",
        tabMode: "shift"
    });

    $(editor.getScrollerElement()).width(300);
    width = $(editor.getScrollerElement()).parent().width();
    $(editor.getScrollerElement()).width(width);
    editor.refresh();

thanks in advance.

like image 486
Pierre Avatar asked Apr 30 '12 10:04

Pierre


People also ask

What is CodeMirror CSS?

CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension.

How do I create a CodeMirror instance?

// create an instance var editor = CodeMirror. fromTextArea('code'); // store it $('#code'). data('CodeMirrorInstance', editor); // get it var myInstance = $('code'). data('CodeMirrorInstance'); // from here on the API functions are available to 'myInstance' again.

How do you use CodeMirror lint?

There's two ways to do this: Find a linter that you can run in the browser, run it on the content, and translate its output into the expected format. Write one from scratch, possibly using the syntax tree kept by the editor.


1 Answers

Make sure you also call refresh when switching to the tab that contains the editor.

like image 57
Marijn Avatar answered Nov 11 '22 14:11

Marijn