potatoes and carrots no bones: Web Code Editor: Codemirror, Getting Started

Saturday, March 9, 2013

Web Code Editor: Codemirror, Getting Started

Introduction

From official site:
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

Setup

1. Go to official site and click "Download the latest release" to download the latest release.

2. Unzip the downloaded file, copy the lib folder and mode folder to your web project as needed.

The Program

codemirror_gettingstarted.html

<html>
    <head>
        <script src="lib/codemirror.js"></script>
        <link rel="stylesheet" href="lib/codemirror.css">
        <script src="mode/javascript/javascript.js"></script>
        <script src="mode/clike/clike.js"></script>
        <style>
            .CodeMirror {
                height: 150px;
            }
        </style>
        <script type="text/javascript">
            // do after window is loaded
            window.onload = function () {
                // jsTextarea: the dom element, textarea with id 'jsTextarea'
                // clikeTextarea: the dom element, textarea with id 'clikeTextarea'
                // jsCodeMirror: code-editor with mode 'javascript'
                // clikeCodeMirror: code-editor with mode 'clike'
                var jsTextarea = document.getElementById('jsTextarea'),
                    clikeTextarea = document.getElementById('clikeTextarea'),
                    jsCodeMirror = CodeMirror.fromTextArea(jsTextarea, {mode: "javascript"}),
                    clikeCodeMirror = CodeMirror.fromTextArea(clikeTextarea, {mode: "clike"});
                // sync value while blur code-editor
                jsCodeMirror.on('blur', function () {
                    jsTextarea.value = jsCodeMirror.getValue();
                });
                clikeCodeMirror.on('blur', function () {
                    clikeTextarea.value = clikeCodeMirror.getValue();
                });
            }
            // show textarea value
            function showJsContent () {
                alert(document.getElementById('jsTextarea').value);
            }
            function showClikeContent () {
                alert(document.getElementById('clikeTextarea').value);
            }
        </script>
    </head>
    <body>
        js:
        <textarea id="jsTextarea"></textarea>
        <button onclick="showJsContent()">show js content</button><br />
        clike:
        <textarea id="clikeTextarea" /></textarea>
        <button onclick="showClikeContent()">show clike content</button>
    </body>
</html>

The Result

View demo on line
http://screencast.com/t/SuOGRLjLjR

Reference

Official site
http://codemirror.net/

User Manual
http://codemirror.net/doc/manual.html

Download

codemirror_gettingstarted.html
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/libs_tools/codemirror/test/codemirror_gettingstarted.html

Demo flash
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/demos/libs_tools/codemirror/codemirror_gettingstarted.swf

2 comments:

UnknownMarch 30, 2013 at 8:41 AM
How ben ,how can i add this type of feature with the CKeditor so that my editor have a option if i selected some text from editor and click on the code button it will show like a code ? Same thing is done by ZK in their New FOrum where the used code tag with editor .Can you please tell me hw can we integrate with ZK Ckeditor?
ReplyDelete
Replies

Add comment