Online-Code-Editor/script.js at main · mhd101/Online-Code-Editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// Customizing HTML Editor
const htmleditor = CodeMirror(document.querySelector('#html'), {
    lineNumbers: true,
    tabSize: 2,
    value: '<!--HTML--> \n<h1 id="heading">Hello World!</h1>',
    theme: 'material-darker',
    lineWrapping: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      },
    mode: 'xml'
});

// Customizing CSS Editor
const csseditor = CodeMirror(document.querySelector('#css'), {
    lineNumbers: true,
    tabSize: 2,
    value: '/*CSS*/ \nh1 {  \n background-color: gray; \n color: white; \n cursor: pointer; \n}',
    theme: 'material-darker',
    lineWrapping: true,
    autoCloseBrackets: true,
    extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      },
    mode: 'css'
});

// Customizing Javascript Editor
const jseditor = CodeMirror(document.querySelector('#javascript'), {
    lineNumbers: true,
    tabSize: 2,
    value: '//JAVASCRIPT \ndocument.getElementById("heading").addEventListener("click", \nfunction(){ \n \t alert("Hello World!");\n});',
    theme: 'material-darker',
    lineWrapping: true,
    autoCloseBrackets: true,
    extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Ctrl-Space": "autocomplete",
      },
    mode: 'javascript'
});


// Compiling The Code
document.querySelector("#btn").addEventListener("click", function () {
    let htmlcode = htmleditor.getValue();
    let csscode = "<style>" + csseditor.getValue() + "</style>";
    let jscode = "<scri" + "pt>" + jseditor.getValue() + "</scri" + "pt>";
    let previewWindow = document.querySelector(".preview-container #code").contentWindow.document;
    previewWindow.open();
    previewWindow.write(htmlcode + csscode + jscode);
    previewWindow.close();
});


// Download Html File
document.getElementById("html-btn").addEventListener("click", function(){
  var text = htmleditor.getValue();
  var htmlfile = "index.html";
  var blob = new Blob([text], {
      type: "text/plain;charset=utf-8"
  });
  saveAs(blob, htmlfile);
}, false);

// Download Css File
document.getElementById("css-btn").addEventListener("click", function(){
  var text = csseditor.getValue();
  var cssfile = "style.css";
  var blob = new Blob([text], {
      type: "text/plain;charset=utf-8"
  });
  saveAs(blob, cssfile);
}, false);


// Download JS File
document.getElementById("js-btn").addEventListener("click", function(){
  var text = jseditor.getValue();
  var jsfile = "script.js";
  var blob = new Blob([text], {
      type: "text/plain;charset=utf-8"
  });
  saveAs(blob, jsfile);
}, false);