如何将CodeMirror合并到我的项目中?

时间:2015-08-02 16:02:40

标签: javascript html css codemirror

我和我的朋友正在一起开发一个项目,这个项目将包括一个浏览器html,javascript和css编辑器。我意识到在浏览器编辑器中编写代码的功能很难 - 这就是我决定要为此项目使用CodeMirror功能的原因。但是,我在将CodeMirror合并到此项目时遇到了一些麻烦。我已经下载了CodeMirror,现在我被卡住了!请任何人帮忙吗?

非常感谢任何帮助。

http://codemirror.net/

1 个答案:

答案 0 :(得分:0)

将以下内容保存到例如path/to/codemirror/test.html(在codemirrors index.html和lib,模式文件夹旁边),在任何体面的浏览器中打开它,找到冒险尝试的起点:

<html>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="mode/xml/xml.js"><!-- needed for htmlmixed --></script>
<script src="mode/css/css.js"></script>
<form>
<fieldset>
<legend>HTML</legend>
<textarea id="htmlCode"><html><h1>E<span style="color:red">x</span>ample</h1></html></textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea id="cssCode">.foo { font-weight: bold; }</textarea>
</fieldset>
<fieldset>
<legend>JS</legend>
<textarea id="jsCode">function myScript(){return 100;}</textarea>
</fieldset>
</form>
<script>
window.onload = function () {
    CodeMirror.fromTextArea(document.getElementById('htmlCode'), {mode: 'htmlmixed'})
    CodeMirror.fromTextArea(document.getElementById('cssCode'), {mode: 'css'})
    CodeMirror.fromTextArea(document.getElementById('jsCode'), {mode: 'javascript', lineNumbers:true})
};
</script>
</html>
相关问题