我的npm版本:4.0.2,使用webpack,我安装了react-codemirror 和我的项目中的codemirror一样。
在我的JS中:
import CodeMirror from 'react-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
var options = {
lineNumbers: true,
readOnly: false,
mode: "javascript"
};
<CodeMirror ref="editor"
value={this.state.code}
onChange={this.updateCode}
options={options}
interact={this.interact}/>
<div class="ReactCodeMirror"><textarea autocomplete="off" style="display: none;">console.log("helloWorld"); //Comments</textarea>
<div class="CodeMirror cm-s-default">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 314.844px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
tabindex="0"></textarea></div>
<div class="CodeMirror-vscrollbar" cm-not-content="true">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" cm-not-content="true">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 0px; min-width: 3px; margin-bottom: -15px; border-right-width: 15px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: none;">
<div class="CodeMirror-measure"></div>
<div class="CodeMirror-measure">
<pre class="CodeMirror-line"><span style="padding-right: 0.1px;">console.log("helloWorld"); //Comments</span></pre>
</div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors" style="">
<div class="CodeMirror-cursor" style="left: 314.844px; top: 0px; height: 20px;"> </div>
</div>
<div class="CodeMirror-code">
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: 0px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 1px;">1</div>
</div>
<pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">console.log("helloWorld"); //Comments</span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div>
<div class="CodeMirror-gutters" style="height: 43px;">
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;"></div>
</div>
</div>
</div>
</div>
该方法似乎成功生成,当我观察CSS时,CSS正确加载:
我有什么遗漏的吗?请指教。