Home > Developer > Web Develop

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

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
by define by ref increment by reference by by turbo by value vs by reference assigned by

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More