Create tryit editor using JavaScript and Codemirror JS

tryit editor using JavaScript and Codemirror JS

Learn how to create your own tryit editor by using JavaScript and Codemirror JS.

To create this tryit editor we will use HTML, CSS, JavaScript and Codemirror.

But we’ll also create this application without codemirror.

what is Codemirror ?

CodeMirror is a versatile text editor implemented in JavaScript for the browser.

For more about codemirror click here


Before we start to create this tryit editor, if you want to see a demo of this application please watch the below video.

DEMO

To create this tryit editor follow the below steps

Step – 1

First create a folder on your desktop name it whatever you want, here i named it tryit_editor.

After that download codemirror from codemirror official website into the newly created folder. Then extract the codemirror ZIP file.


Step – 2

After completing the above step, now we just need to create a file. It is index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tryit editor - Webtutorials.ME</title>
<!--CODEMIRROR DEPENDENCIES-->
<link rel="stylesheet" href="./codemirror/lib/codemirror.css" type="text/css" media="all">
<link rel="stylesheet" href="./codemirror/addon/hint/show-hint.css" type="text/css" media="all">
<link rel="stylesheet" href="./codemirror/addon/display/fullscreen.css" type="text/css" media="all">
<script src="./codemirror/lib/codemirror.js"></script>
<script src="./codemirror/mode/xml/xml.js"></script>
<script src="./codemirror/mode/javascript/javascript.js"></script>
<script src="./codemirror/mode/css/css.js"></script>
<script src="./codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="./codemirror/addon/edit/matchbrackets.js"></script>
<script src="./codemirror/addon/edit/matchtags.js"></script>
<script src="./codemirror/addon/edit/closebrackets.js"></script>
<script src="./codemirror/addon/edit/closetag.js"></script>
<script src="./codemirror/addon/fold/xml-fold.js"></script>
<script src="./codemirror/addon/hint/show-hint.js"></script>
<script src="./codemirror/addon/hint/css-hint.js"></script>
<script src="./codemirror/addon/hint/javascript-hint.js"></script>
<script src="./codemirror/addon/hint/html-hint.js"></script>
<script src="./codemirror/addon/hint/xml-hint.js"></script>
<script src="./codemirror/addon/hint/anyword-hint.js"></script>
<script src="./codemirror/addon/hint/sql-hint.js"></script>
<script src="./codemirror/addon/display/fullscreen.js"></script>
<script src="./codemirror/addon/selection/mark-selection.js"></script>
<!--END OF CODEMIRROR DEPENDENCIES-->
<style>
*{
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    font-family: sans-serif;
    padding: 50px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container-wrapper {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    border: 1px solid #cccccc;
    padding: 10px;
    background: #ffffff;
}

.container-wrapper div {
    flex: 1;
}

.code-area {
    width: 100%;
    height: 400px;
    resize: none;
    overflow-y: auto;
    white-space: pre-wrap;
    outline: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.run-code-btn {
    float: right;
    margin-bottom: 10px;
    padding: 10px 20px;
    text-transform: uppercase;
    cursor: pointer;
    background: #333333;
    border: 1px solid rgba(0, 0, 0, .1);
    color: #ffffff;
    outline: none;
    transition: all .3s;
}

.run-code-btn:hover {
    border-color: #333333;
    color: #222222;
    background: #ffffff;
}

.iframe_style {
    width: 100%;
    height: 100%;
    border: 1px solid #cccccc;
}

.CodeMirror {
    border: 1px solid #cccccc;
    width: 100%;
    height: 400px;
}

.iframe-container {
    padding-left: 10px;
}
</style>
</head>

<body>
<div class="container">
<div class="container-wrapper">
<div class="code-containter">
<select id="choose_language">
    <option selected value="text/html">HTML</option>
    <option value="text/xml">XML</option>
    <option value="text/css">CSS</option>
    <option value="text/javascript">JavaScript</option>
</select>
<button class="run-code-btn" id="run_btn">Run</button>
<textarea name="code_area" class="code-area" id="code_area"></textarea>
</div>
<div class="iframe-container">
<iframe class="iframe_style" id="iframe"></iframe>
</div>
</div>
</div>
<script>
/* MAIN FUNCTION FOR RENDERING TEXTAREA CODE TO IFRAME */
function run_code() {
    var iframe = document.getElementById('iframe');
    iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument) ? iframe.contentDocument.document : iframe.contentDocument;
    iframe.document.open();
    // GET CODEMIRROR TEXTAREA VALUE [ editor.getValue() ]
    iframe.document.write(editor.getValue());
    iframe.document.close();
    return false;
}
//WHEN CLICKED RUN BUTTON
document.getElementById('run_btn').addEventListener('click', function() {
    run_code();
});
   
// SET MODE DYNAMICALLY
document.getElementById('choose_language').addEventListener('change',function(){
    var select_language = document.getElementById('choose_language').value;
    editor.setOption("mode", select_language);
});

// TO UNDERSTAND THIS CODE VISIT CODEMIRROR OFFICIAL WEBSITES   
var editor = CodeMirror.fromTextArea(document.getElementById('code_area'), {
    mode: 'text/html',
    matchBrackets: true,
    lineNumbers: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    matchTags: {
    bothTags: true
    },
    extraKeys: {
        "Ctrl-J": "toMatchingTag"
    },
    lineWrapping: true,
    styleSelectedText: true,
    extraKeys: {
        "Ctrl-Space": "autocomplete",
        "Ctrl-F": function(cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    }
});
</script>
</body>
</html>

Features of this editor

  • Auto close Tags & Brackets
  • Code hint
  • Fullscreen mode on – off
  • Match Tags & Brackets
  • Autocomplete
  • You can add more features

Without Codemirror JS

For those people who do not want to use codemirror js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tryit editor - Webtutorials.ME</title>
<style>
*{
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    font-family: sans-serif;
    padding: 50px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container-wrapper {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    border: 1px solid #cccccc;
    padding: 10px;
    background: #ffffff;
}

.container-wrapper div {
    flex: 1;
}

.code-area {
    width: 100%;
    height: 400px;
    resize: none;
    overflow-y: auto;
    white-space: pre-wrap;
    outline: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.run-code-btn {
    float: right;
    margin-bottom: 10px;
    padding: 10px 20px;
    text-transform: uppercase;
    cursor: pointer;
    background: #333333;
    border: 1px solid rgba(0, 0, 0, .1);
    color: #ffffff;
    outline: none;
    transition: all .3s;
}

.run-code-btn:hover {
    border-color: #333333;
    color: #222222;
    background: #ffffff;
}

.iframe_style {
    width: 100%;
    height: 100%;
    border: 1px solid #cccccc;
}

.CodeMirror {
    border: 1px solid #cccccc;
    width: 100%;
    height: 400px;
}

.iframe-container {
    padding-left: 10px;
}
</style>
</head>

<body>
<div class="container">
<div class="container-wrapper">
<div class="code-containter">
<button class="run-code-btn" id="run_btn">Run</button>
<textarea name="code_area" class="code-area" id="code_area"></textarea>
</div>
<div class="iframe-container">
<iframe class="iframe_style" id="iframe"></iframe>
</div>
</div>
</div>
<script>
/* MAIN FUNCTION FOR RENDERING TEXTAREA CODE TO IFRAME */
function run_code() {
    var iframe = document.getElementById('iframe');
    iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument) ? iframe.contentDocument.document : iframe.contentDocument;
    iframe.document.open();
    iframe.document.write(document.getElementById('code_area').value);
    iframe.document.close();
    return false;
}
//WHEN CLICKED RUN BUTTON
document.getElementById('run_btn').addEventListener('click', function() {
    run_code();
});
</script>
</body>
</html>

Completed!


Read Also

Posts Navigation


Leave a Reply

Your email address will not be published. Required fields are marked *