Search code examples
javascripthtmlcsscodemirror

How to incorporate CodeMirror into my project?

Me and my friend are developing a project together, this project will include an in browser html, javascript and css editor. I realised that the functionality to code an in browser editor would be difficult - this is the reason that I have decided that I want to use CodeMirror functionality for this project. However, I am having some trouble incorporating CodeMirror into this project. I have downloaded CodeMirror and I am now stuck! Please can anyone help?

Any help would be greatly appreciated.

http://codemirror.net/

Solution

  • Save the following to e.g. path/to/codemirror/test.html (next to codemirrors index.html and lib, mode folders), open it in any decent browser and find a starting point for your adventurous endeavour:

    <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>