Write the editor by yourself -- Lumia converted red by Atom

Source: Internet
Author: User

After the previous node webkit with javascript to build web native, finally can make an atom editor, but here is to remember the Nokia Lumia mobile phone, the final code see https://github.com/gmszone/lumia


You must configure the development environment before you start. Mac OSUnder
Https://github.com/rogerwang/node-webkit
Find the corresponding version

Copy the app to the Application and add the following alias ~ /. Bash_profile
    # alias to nw     alias nw="/Applications/node-webkit.app/Contents/MacOS/node-webkit"
Application
    source ~/.bash_profile
The method to start an application is
    nw app.nw  
Before starting
zip -r app.nw *

In this way, we have a basic framework.


The initial version of lumia 0.1 is from

Https://github.com/zcbenz/nw-sample-apps

This is an example from the node-webkit official website.

This example seems unfriendly at all. When writing this article, the Lumia Editor


It looks like atom editor, because css is referenced in atom editor.

Currently, the framework mainly consists of the following two basic functions (reprinted and retained: write your own editor-Lumia converted red by Atom)
  • Node. js
  • Node-webkit
  • CodeMirror
Obviously, Node-Webkit has played a major role, but CodeMirror is also indispensable. As an online editor tool, it can be used by other current workers.

  • Underscore JS extension Library
  • StringJS makes String processing easier

However, there are more libraries in Package. json, but they have not yet played a role.

The basic functions of Lumia Editor have not made too many modifications to the Node-Webkit example. The modifications are mainly based on the following parts:
  • Remove the Save, Open, and New buttons and change them to shortcut keys.
  • Beautify the UI
  • Extended matching and support for more languages
  • Sublime Shortcut Key Binding
Therefore, its basic function is
  • Open, save, and create a file
  • The same shortcut key as Sublime
  • Atom-like appearance
  • Search
Javascript + HTML + Node-WebkitHTML + CSS mainly beautify the interface
        <body style="background:#fff">            <div class="workspace" background="#fff">                <div class="horizontal">                    <div class="vertical">                        <div class="panes">                            <div class="pane" style="min-width:100%;">                                <ul tabindex="-1" class="list-inline tab-bar inset-panel">                                    <li class="tab active">                                        <div class="title" id="title">untitled</div>                                        <div class="close-icon"></div>                                    </li>                                </ul>                                <div class="editor">                                <div id="editor"></div>                                </div>                            </div>                        </div>                        <div class="status-bar tool-panel panel-bottom">                            <div class="flexbox-repaint-hack">                                <div class="status-bar-left">                                    <div class="cursor-position inline-block" id="mode">                                        </a>                                        <div class="status-image inline-block">                                            <span class="image-size" style="display: none;"></span>                                        </div>                                    </div>                                </div>                            </div>                        </div>                    </div>                    <input style="display:none;" id="newFile" type="file" />                    <input style="display:none;" id="openFile" type="file" />                    <input style="display:none;" id="saveFile" type="file" nwsaveas />                </div>                <div style="display:none">                    <button style="display:none;" id="new">New</button>                    <button style="display:none;" id="open">Open</button>                    <button style="display:none;" id="save">Save</button>                </div>        </body>


If you move the title to the top of the page and change it to the same position as the title, it looks like a chrome browser tag. Here, we mainly use the pseudo element of CSS.
        .tab-bar .tab:before {            content:'';            position: absolute;            top: -1px;            left: -16px;            height: 26px;            width: 30px;            border-top-left-radius: 3px;            border-left: 1px solid #b9b9b9;            box-shadow: inset 1px -1px 1px rgba(0, 0, 0, 0.05);            -webkit-transform: skewX(133deg);        }        .tab-bar:after {            content:"";            position: absolute;            bottom: 0;            height: 5px;            left: 0px;            width: 100%;            background-color: #f0f0f0;            border-bottom: 1px solid #dddddd;            border-top: 1px solid #b9b9b9;        }

These are mainly manifested in appearance. In general, they are the above practices.

Editor. jsThe main task is to judge and process events.
           onload = function() {                      newButton = document.getElementById("new");            openButton = document.getElementById("open");            saveButton = document.getElementById("save");            newButton.addEventListener("click", handleNewButton);            openButton.addEventListener("click", handleOpenButton);            saveButton.addEventListener("click", handleSaveButton);            $("#saveFile").change(function(evt) {                onChosenFileToSave($(this).val());            });            $("#openFile").change(function(evt) {                onChosenFileToOpen($(this).val());            });                editor = CodeMirror(                document.getElementById("editor"), {                    lineNumbers: true,                    keyMap: "sublime",                    autoCloseBrackets: true,                    matchBrackets: true,                    showCursorWhenSelecting: true,                    extraKeys: {                        "Cmd-N": function(instance) {                            handleNewButton()                        },                        "Ctrl-N": function(instance) {                            handleNewButton()                        },                        "Cmd-O": function(instance) {                            handleOpenButton()                        },                        "Ctrl-O": function(instance) {                            handleOpenButton()                        },                        "Cmd-S": function(instance) {                            handleSaveButton()                        },                        "Ctrl-S": function(instance) {                            handleSaveButton()                        },                        "Cmd-Shift-P": function(instance) {                           console.log("hello".green)                        }                    }                });            newFile();            onresize();            gui.Window.get().show();        };

We can see that the editor is mainly driven by CodeMirror, and the judgment of the language is used to determine the language and highlight it.
       function handleDocumentChange(title) {            var mode = "javascript";            var modeName = "JavaScript";            if (title) {                title = title.match(/[^/]+$/)[0];                document.getElementById("title").innerHTML = title;                document.title ="Lumia"+title;                _.each(m.allmodes, function(modes) {                    if (S(title).contains(modes["filename"])) {                        mode = modes["mode"];                        modeName = modes["modeName"];                        console.log(mode);                    }                });            } else {                document.getElementById("title").innerHTML = "[no document loaded]";            }            editor.setOption("mode", mode);            document.getElementById("mode").innerHTML = modeName;        }


The main task is UnderscoreAnd StringjsHere, m uses an external file.
     var m = require('./allmodes')

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.