Wie Modus, Thema oder Addon Code Mirror in browserify

Question

erfordern Hat jemand versucht, Code Mirror über Browserify zu verwenden?

Ich finde nichts ist sichtbar, obwohl es bereits alle HTML-Tags generiert.

Der Code:

var CodeMirror = require('codemirror'); 
require('codemirror/mode/javascript/javascript.js'); 

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
    extraKeys: { 
     "Ctrl-Space": "autocomplete" 
    }, 
    mode: { 
     name: "javascript", 
     globalVars: true 
    } 
    }); 

Ich frage mich, wie ich sollte die js-Modus erfordern?

Answer 1

ich mit diesem Problem tatsächlich dealed durch erfordern() verwendet für alle Abhängigkeiten der Demonstration von html5complete mode demo wie folgt aus:

// require('codemirror/addon/hint/show-hint'); 
// require('codemirror/addon/hint/xml-hint'); 
// require('codemirror/addon/hint/html-hint'); 

require('codemirror/mode/xml/xml'); 
require('codemirror/mode/javascript/javascript'); 
require('codemirror/mode/css/css'); 
require('codemirror/mode/htmlmixed/htmlmixed'); 

var CodeMirror = require('codemirror/lib/codemirror'); 

var editor = CodeMirror.fromTextArea(textareaElement, { 
    mode: 'text/html', 
    lineWrapping: true, 
    extraKeys: { 
    'Ctrl-Space': 'autocomplete' 
    }, 
    lineNumbers: true, 
    theme: 'monokai' 
}); 

In meiner .Weniger Dateien importiert ich die CSS wie folgt aus:

@import (inline) "./../../node_modules/codemirror/lib/codemirror.css"; 
@import (inline) "./../../node_modules/codemirror/theme/monokai.css"; 
// @import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css"; 

Ich habe nicht wirklich auf die Qualität dieses Tricks geachtet.

Answer 2

Hier ist, was für mich funktioniert. Mit Import statt erfordern, aber gleichen Kern:

import 'codemirror/theme/3024-night.css' 
 

 
const options = { 
 
     lineNumbers: true, 
 
     readOnly: false, 
 
     mode: 'htmlmixed', 
 
     theme:'3024-night' 
 
}; 
 

 
... 
 

 

 
<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>